How to create a Calendar View in Universal Windows App.

How to create a Calendar View in Universal Windows App.

CalendarView is a new control that has been introduced in the Universal Windows Apps. This View provides a visual calendar display that the user can use to select a date. This view can be customized by the developers by setting the max and min days to be displayed and black out the days that are not to be rendered.  The calendar view  lets the developers to change the language to be displayed. Let see how to create a simple CalendarView in detail.

calender8

Add a CalendarView to the xaml Page as shown below.


<CalendarView SelectionMode="Single" CalendarViewDayItemChanging="CalendarView_CalendarViewDayItemChanging" IsGroupLabelVisible="True" HorizontalAlignment="Center" VerticalAlignment="Center" IsOutOfScopeEnabled="True" Language="en-US" CalendarIdentifier="GregorianCalendar"/>

The Language property is use to display the calendar in the specified language, set it to en-US and also the CalendarIdentifier property is used to set the type of calendar that to be displayed. the possible CalendarIdentifier are given below.

calender1

The IsTodayHighlighted property is used to highlight today in the calendar view. SelectionMode property is used to set the the single or multiple selection mode or even set the selection mode to nothing.

The FlowDirection property is used to set the direction in which the days are shown. If it is set to RightToLeft then the days are shown form right to left and if it set to LeftToRight then the days are shown form left to right.

calender6

The MaxDate and MinDate properties are used to set the max and min days to be displayed in the CalendarView. If some of the days in a weeks has to be black out then the on CalendarViewDayItemChanging Event check the date and set the IsBlackout to true to set the  date as black out.

calender4calender5


private void CalendarView_CalendarViewDayItemChanging(CalendarView sender, CalendarViewDayItemChangingEventArgs args)
{

if (args.Item.Date.DayOfWeek == DayOfWeek.Saturday ||
args.Item.Date.DayOfWeek == DayOfWeek.Sunday)
{
args.Item.IsBlackout = true;
}
}

calender8

And there are so many other properties which makes the control more rich and better.

Hope this post might have helped.

Arun Kumar

Arun kumar Surya Prakash, is a  Developer  Consultant. He  is a Microsoft Certified Solution  Developer  for Store App Development, and a Azure Solution Developer. His core skills is on developing Windows Store App and Cross Platform App development. You can follow him @arunnov04