ComponentOne Calendar for UWP
Step 2 of 3: Adding Data to the Calendar
Calendar for UWP Quick Start > Step 2 of 3: Adding Data to the Calendar

In the last step, you added the C1Calendar control to the application. In this step, you will add a DataSeries object and data for it.

Complete the following steps to add data to the calendar programmatically:

  1. Select View | Code to switch to Code view.
  1. Add the following imports statements to the top of the page:

To write the code in Visual Basic:

Visual Basic
Copy Code 
Imports Windows.UI.ViewManagement
Imports C1.Xaml
Imports C1.Xaml.Calendar

To write the code in C#:

C#
Copy Code 
using Windows.UI.ViewManagement;
using C1.Xaml;
using C1.Xaml.Calendar;
  1. Add the following code just inside the MainPage class:

To write the code in Visual Basic:

Visual Basic
Copy Code 
' dictionary of appointments
Private _boldedDays As New Dictionary(Of DateTime, String)()
Private _dayTemplateSelector As DaySlotTemplateSelector = Nothing
Private _loaded As Boolean = False

To write the code in C#:

C#
Copy Code 
// dictionary of appointments
private Dictionary<DateTime, string> _boldedDays = new Dictionary<DateTime, string>();
private DaySlotTemplateSelector _dayTemplateSelector = null;
private bool _loaded = false;
  1. Update the MainPage code so it appears like the following:

To write the code in Visual Basic:

Visual Basic
Copy Code 
Public Sub New()
    Me.InitializeComponent()
    AddHandler Window.Current.SizeChanged, AddressOf Current_SizeChanged
    Calendar.DayOfWeekSlotTemplateSelector = New DayOfWeekTemplateSelector()

    ' add some bold days
    _boldedDays.Add(DateTime.Today.AddDays(2), "Game" & vbCr & vbLf & "Don't forget!")
    _boldedDays.Add(DateTime.Today.AddDays(13), "Birthday")
    _boldedDays.Add(DateTime.Today.AddDays(22), "Important Meeting")
    _boldedDays.Add(DateTime.Today.AddDays(-1), "Anniversary" & vbCr & vbLf & "Party at 8")
    _boldedDays.Add(DateTime.Today.AddDays(-12), "Doctor's Appointment")
    _boldedDays.Add(DateTime.Today.AddDays(-21), "Conference Day 2")
    _boldedDays.Add(DateTime.Today.AddDays(-22), "Conference Day 1")
    For Each val As DateTime In _boldedDays.Keys
        Calendar.BoldedDates.Add(val)
    Next
End Sub

To write the code in C#:

C#
Copy Code 
public MainPage()
{
    this.InitializeComponent();
    Window.Current.SizeChanged += Current_SizeChanged;
    Calendar.DayOfWeekSlotTemplateSelector = new DayOfWeekTemplateSelector();

    // add some bold days
    _boldedDays.Add(DateTime.Today.AddDays(2), "Game\r\nDon't forget!");
    _boldedDays.Add(DateTime.Today.AddDays(13), "Birthday");
    _boldedDays.Add(DateTime.Today.AddDays(22), "Important Meeting");
    _boldedDays.Add(DateTime.Today.AddDays(-1), "Anniversary\r\nParty at 8 ");
    _boldedDays.Add(DateTime.Today.AddDays(-12), "Doctor's Appointment");
    _boldedDays.Add(DateTime.Today.AddDays(-21), "Conference Day 2");
    _boldedDays.Add(DateTime.Today.AddDays(-22), "Conference Day 1");
    foreach (DateTime val in _boldedDays.Keys)
    {
        Calendar.BoldedDates.Add(val);
    }
}
  1. Add the following code just under the code you just added, still in the MainPage class:

To write the code in Visual Basic:

Visual Basic
Copy Code 
Private Sub Calendar_SelectedDateChanged(sender As Object, e As DateChangedEventArgs)
        If Calendar.SelectedDates.Count > 0 AndAlso _boldedDays.ContainsKey(Calendar.SelectedDates(0)) Then
            dayInfo.Text = _boldedDays(Calendar.SelectedDates(0))
        Else
            dayInfo.Text = ""
        End If
    End Sub
    ''' <summary>
    ''' The DayTemplateSelector to use custom DataTemplate for bolded dates
    ''' </summary>
    Private ReadOnly Property DayTemplateSelector() As DaySlotTemplateSelector
        Get
            If _dayTemplateSelector Is Nothing Then
                _dayTemplateSelector = TryCast(Resources("DaySlotTemplateSelector"), DaySlotTemplateSelector)
                If _dayTemplateSelector IsNot Nothing Then
                    _dayTemplateSelector.BoldedDays = Me._boldedDays
                End If
            End If
            Return _dayTemplateSelector
        End Get
    End Property


    Private Sub Current_SizeChanged(sender As Object, e As Windows.UI.Core.WindowSizeChangedEventArgs)
        UpdateViewState()
    End Sub

    Private Sub UpdateViewState()
        Calendar.ClearValue(HeightProperty)

        Select Case ApplicationView.Value
            Case ApplicationViewState.Filled
                Calendar.DaySlotTemplateSelector = DayTemplateSelector
                VisualStateManager.GoToState(Me, "Fill", False)
                Exit Select

            Case ApplicationViewState.FullScreenLandscape
                Calendar.DaySlotTemplateSelector = DayTemplateSelector
                VisualStateManager.GoToState(Me, "Full", False)
                Exit Select

            Case ApplicationViewState.Snapped
                ' we have too few space, so use default DaySlotTemplateSelector
                Calendar.Height = 400
                Calendar.DaySlotTemplateSelector = TryCast(Resources("SmallDaySlotTemplateSelector"), DataTemplateSelector)
                VisualStateManager.GoToState(Me, "Snapped", False)
                Exit Select

            Case ApplicationViewState.FullScreenPortrait
                Calendar.DaySlotTemplateSelector = DayTemplateSelector
                VisualStateManager.GoToState(Me, "Portrait", False)
                Exit Select
            Case Else

                Return
        End Select
        Calendar.UpdateLayout()
    End Sub
    ''' <summary>
    ''' Invoked when this page is about to be displayed in a Frame.
    ''' </summary>
    ''' <param name="e">Event data that describes how this page was reached.  The Parameter
    ''' property is typically used to configure the page.</param>
    Protected Overrides Sub OnNavigatedTo(e As NavigationEventArgs)
        UpdateViewState()
        _loaded = True
    End Sub

    Protected Overrides Sub OnNavigatedFrom(e As NavigationEventArgs)
        _loaded = False
        MyBase.OnNavigatedFrom(e)
End Sub

To write the code in C#:

C#
Copy Code 
void Calendar_SelectedDateChanged(object sender, DateChangedEventArgs e)
        {
            if (Calendar.SelectedDates.Count > 0 && _boldedDays.ContainsKey(Calendar.SelectedDates[0]))
            {
                dayInfo.Text = _boldedDays[Calendar.SelectedDates[0]];
            }
            else
            {
                dayInfo.Text = "";
            }
        }

        /// <summary>
        /// The DayTemplateSelector to use custom DataTemplate for bolded dates
        /// </summary>
        private DaySlotTemplateSelector DayTemplateSelector
        {
            get
            {
                if (_dayTemplateSelector == null)
                {
                    _dayTemplateSelector = Resources["DaySlotTemplateSelector"] as DaySlotTemplateSelector;
                    if (_dayTemplateSelector != null)
                    {
                        _dayTemplateSelector.BoldedDays = this._boldedDays;
                    }
                }
                return _dayTemplateSelector;
            }
        }


        void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
        {
            UpdateViewState();
        }

        private void UpdateViewState()
        {
            Calendar.ClearValue(HeightProperty);

            switch (ApplicationView.Value)
            {
                case ApplicationViewState.Filled:
                    Calendar.DaySlotTemplateSelector = DayTemplateSelector;
                    VisualStateManager.GoToState(this, "Fill", false);
                    break;

                case ApplicationViewState.FullScreenLandscape:
                    Calendar.DaySlotTemplateSelector = DayTemplateSelector;
                    VisualStateManager.GoToState(this, "Full", false);
                    break;

                case ApplicationViewState.Snapped:
                    // we have too few space, so use default DaySlotTemplateSelector
                    Calendar.Height = 400;
                    Calendar.DaySlotTemplateSelector = Resources["SmallDaySlotTemplateSelector"] as DataTemplateSelector;
                    VisualStateManager.GoToState(this, "Snapped", false);
                    break;

                case ApplicationViewState.FullScreenPortrait:
                    Calendar.DaySlotTemplateSelector = DayTemplateSelector;
                    VisualStateManager.GoToState(this, "Portrait", false);
                    break;

                default:
                    return;
            }
            Calendar.UpdateLayout();
        }

        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            UpdateViewState();
            _loaded = true;
        }

        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            _loaded = false;
            base.OnNavigatedFrom(e);
        }

6.       Add the following classes just under the MainPage class:

To write the code in Visual Basic:

Visual Basic
Copy Code 
Public Class DaySlotTemplateSelector
    Inherits C1.Xaml.Calendar.DaySlotTemplateSelector
    Public BoldedDays As New Dictionary(Of DateTime, String)()

    Protected Overrides Function SelectTemplateCore(item As Object, container As DependencyObject) As DataTemplate
        Dim slot As DaySlot = TryCast(item, DaySlot)
        If slot IsNot Nothing AndAlso BoldedDays.ContainsKey(slot.[Date]) Then
            ' put appointments information into tag, so that it is possible to show it in a day DataTemplate
            slot.Tag = BoldedDays(slot.[Date])
        Else
            ' clear appointments information
            slot.Tag = Nothing
        End If
        If slot IsNot Nothing AndAlso Not slot.IsAdjacent AndAlso slot.DayOfWeek = DayOfWeek.Saturday Then
            ' set color for Saturday
            DirectCast(container, Control).Foreground = New SolidColorBrush(Windows.UI.Color.FromArgb(255, 0, 90, 255))
        End If
        ' the base class will select custom DataTemplate, defined in the DaySlotTemplateSelector.Resources collection (see MainPage.xaml file)
        Return MyBase.SelectTemplateCore(item, container)
    End Function
End Class

Public Class SmallDaySlotTemplateSelector
    Inherits C1.Xaml.Calendar.DaySlotTemplateSelector
    Protected Overrides Function SelectTemplateCore(item As Object, container As DependencyObject) As DataTemplate
        Dim slot As DaySlot = TryCast(item, DaySlot)
        If slot IsNot Nothing AndAlso Not slot.IsAdjacent AndAlso slot.DayOfWeek = DayOfWeek.Saturday Then
            ' set color for Saturday
            DirectCast(container, Control).Foreground = New SolidColorBrush(Windows.UI.Color.FromArgb(255, 0, 90, 255))
        End If
        ' the base class will select custom DataTemplate, defined in the DaySlotTemplateSelector.Resources collection (see MainPage.xaml file)
        Return MyBase.SelectTemplateCore(item, container)
    End Function
End Class

Public Class DayOfWeekTemplateSelector
    Inherits DataTemplateSelector
    Protected Overrides Function SelectTemplateCore(item As Object, container As DependencyObject) As DataTemplate
        Dim slot As DayOfWeekSlot = TryCast(item, DayOfWeekSlot)
        If slot IsNot Nothing AndAlso slot.DayOfWeek = DayOfWeek.Saturday Then
            ' set color for Saturday
            DirectCast(container, Control).Foreground = New SolidColorBrush(Windows.UI.Color.FromArgb(255, 0, 90, 255))
        End If
        ' don't change DataTemplate at all
        Return Nothing
    End Function

End Class

To write the code in C#:

C#
Copy Code 
public class DaySlotTemplateSelector : C1.Xaml.Calendar.DaySlotTemplateSelector
    {
        public Dictionary<DateTime, string> BoldedDays = new Dictionary<DateTime, string>();

        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {
            DaySlot slot = item as DaySlot;
            if (slot != null && BoldedDays.ContainsKey(slot.Date))
            {
                // put appointments information into tag, so that it is possible to show it in a day DataTemplate
                slot.Tag = BoldedDays[slot.Date];
            }
            else
            {
                // clear appointments information
                slot.Tag = null;
            }
            if (slot != null && !slot.IsAdjacent && slot.DayOfWeek == DayOfWeek.Saturday)
            {
                // set color for Saturday
                ((Control)container).Foreground = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 0, 90, 255));
            }
            // the base class will select custom DataTemplate, defined in the DaySlotTemplateSelector.Resources collection (see MainPage.xaml file)
            return base.SelectTemplateCore(item, container);
        }
    }

    public class SmallDaySlotTemplateSelector : C1.Xaml.Calendar.DaySlotTemplateSelector
    {
        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {
            DaySlot slot = item as DaySlot;
            if (slot != null && !slot.IsAdjacent && slot.DayOfWeek == DayOfWeek.Saturday)
            {
                // set color for Saturday
                ((Control)container).Foreground = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 0, 90, 255));
            }
            // the base class will select custom DataTemplate, defined in the DaySlotTemplateSelector.Resources collection (see MainPage.xaml file)
            return base.SelectTemplateCore(item, container);
        }
    }

    public class DayOfWeekTemplateSelector : DataTemplateSelector
    {
        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {
            DayOfWeekSlot slot = item as DayOfWeekSlot;
            if (slot != null && slot.DayOfWeek == DayOfWeek.Saturday)
            {
                // set color for Saturday
                ((Control)container).Foreground = new SolidColorBrush(Windows.UI.Color.FromArgb(255, 0, 90, 255));
            }
            // don't change DataTemplate at all
            return null;
        }

    }

In the next step, you'll examine the features of Calendar for UWP.

What You've Accomplished

You have successfully added data to C1Calendar. In the next step you’ll observe some run-time behaviors.

See Also
Step 3 of 3: Running the Calendar Application

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page