CalendarView Control In Universal Apps

CalendarView control gives users a standard view of a calendar.

CalendarView control looks like the following:



CalendarView control can be declared like this:

<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":

<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:

public MainPage()
{
   this.InitializeComponent();

   calendarView.SelectedDatesChanged += (e, f) => {

    f.AddedDates.ToList().ForEach(x => {
      ShowMessage("Added Date: " + x.Date.ToString("dd/MM/yyyy")); });

    f.RemovedDates.ToList().ForEach(x => {
      ShowMessage("Removed Date: " + x.Date.ToString("dd/MM/yyyy")); });

   };
}

public async void ShowMessage(string message)
{
  var msg = new Windows.UI.Popups.MessageDialog(message);
  msg.DefaultCommandIndex = 1;
  await msg.ShowAsync();
}

Since SelectedDatesChanged event stores which days were added/removed, we can access them easily.