Calendar for WinRT

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.

2. 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;

3. 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;

4. 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 0\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 3\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); } }

5. 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 WinRT.

What You've Accomplished

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