CalendarView Control In Universal Apps

In this article I'll be talking about CalendarView Control and declaring it in an example.

CalendarView control gives users a standard view of a calendar.

CalendarView control looks like the following:



CalendarView control can be declared like this:

  1. <CalendarView Name="calendarView"/>  
With CalendarView, you can pick multiple dates. In CalendarDatePicker control that was not possible.
 
You only need to assign SelectionMode property to "Multiple":
  1. <CalendarView Name="calendarView" CalendarIdentifier="GregorianCalendar" SelectionMode="Multiple"/>  
Using Multiple option selected, you'll be able to pick more than one date:



Here's an example how to get which dates were picked:
  1. public MainPage()  
  2. {  
  3.    this.InitializeComponent();  
  4.   
  5.    calendarView.SelectedDatesChanged += (e, f) => {  
  6.   
  7.     f.AddedDates.ToList().ForEach(x => { 
  8.       ShowMessage("Added Date: " + x.Date.ToString("dd/MM/yyyy")); });  
  9.   
  10.     f.RemovedDates.ToList().ForEach(x => { 
  11.       ShowMessage("Removed Date: " + x.Date.ToString("dd/MM/yyyy")); });  
  12.   
  13.    };  
  14. }  
  1. public async void ShowMessage(string message)  
  2. {  
  3.   var msg = new Windows.UI.Popups.MessageDialog(message);  
  4.   msg.DefaultCommandIndex = 1;  
  5.   await msg.ShowAsync();  
  6. }  
Since SelectedDatesChanged event stores which days were added/removed, we can access them easily.