Displaying Dates

Calendar

Start of the Week

You can specify what day of the week should be considered as the start by setting the StartOfWeek property of the Calendar.

For Example:

• When StartOfWeek is DayOfWeek.Monday, the first row of February 2022 would be 1st Feb - 7th Feb.
• When StartOfWeek is DayOfWeek.Wednesday, the first row of February 2022 would be 26th Jan - 1st Feb
• When StartOfWeek is DayOfWeek.Sunday, the first row of February 2022 would be 31st Jan - 6th Feb

Rows

You can set how many rows you want to display by changing the Rows property of the Calendar.

Alternatively, the Calendar can automatically set the Rows value to the minimum amount needed to display every week of the NavigatedDate's month. This can be done by setting the AutoRows property of the Calendar to true. You can ensure that AutoRows always uses the highest Rows value required in the year by setting the AutoRowsIsConsistent property of the Calendar to true.

For example, when the start of the week is Monday, these are the values that will be calculated using AutoRows:

Date	Value	Value (AutoRowsIsConsistent)
January 2021	5	6
February 2021	4	6
March 2021	5	6
April 2021	5	6
May 2021	6	6
June 2021	5	6
July 2021	5	6
August 2021	6	6
September 2021	5	6
Ocotober 2021	5	6
November 2021	5	6
December 2021	5	6

Day Of Week Order

The displayed dates are stored in the DayNamesOrder property.

The value of the DayNamesOrder is automatically calculated by the Calendar based on the values of its StartOfWeek and CustomDayNamesOrder:

• First, the Calendar determines the default order of the days of the week using the value of the StartOfWeek property of the Calendar.
• Then, the Calendar creates a default list of dates based on the days of week in the calculated order.
• If the CustomDayNamesOrder property of the Calendar is null, these default dates will be shown.
• If the CustomDayNamesOrder property of the Calendar is not null, the Calendar will cherry-pick values from these default dates, mapping their DayOfWeek to the values specified in the CustomDayNamesOrder property and shows the result.

The CustomDayNamesOrder property supports duplicates and non-chronological orders, but must contain at least one value.

CustomDayNamesOrder Examples

StartOfWeek	DayNamesOrder	Resulting Row (January 2023 Week 1)
Monday	Mon, Tue, Wed, Thu, Fri, Sat, Sun	26th Dec, 27th Dec, 28th Dec, 29th Dec, 30th Dec, 31st Dec, 1st Jan
Monday	Sun, Sat, Fri, Thu, Wed, Tue, Mon	1st Jan, 31st Dec, 30th Dec, 29th Dec, 28th Dec, 27th Dec, 26th Dec
Monday	Wed, Fri, Mon, Thu, Sat, Sun, Tue	28th Dec, 30th Dec, 26th Dec, 29th Dec, 31st Dec, 1st Jan, 27th Dec
Monday	Mon, Thu, Sun	26th Dec, 29th Dec, 1st Jan
Monday	Mon, Sun, Tue Tue, Mon	26th Dec, 1st Jan, 27th Dec, 27th Dec, 26th Dec

StartOfWeek	DayNamesOrder	Resulting Row (January 2023 Week 1)
Tuesday	Mon, Tue, Wed, Thu, Fri, Sat, Sun	27th Dec, 28th Dec, 29th Dec, 30th Dec, 31st Dec, 1st Jan, 2nd Jan
Tuesday	Sun, Sat, Fri, Thu, Wed, Tue, Mon	1st Jan, 31st Dec, 30th Dec, 29th Dec, 28th Dec, 27th Dec, 2nd Jan
Tuesday	Wed, Fri, Mon, Thu, Sat, Sun, Tue	28th Dec, 30th Dec, 2nd Jan, 29th Dec, 31st Dec, 1st Jan, 27th Dec
Tuesday	Mon, Thu, Sun	2nd Jan, 29th Dec, 1st Jan
Tuesday	Mon, Sun, Tue Tue, Mon	2nd Jan, 1st Jan, 27th Dec, 27th Dec, 2nd Jan

StartOfWeek	DayNamesOrder	Resulting Row (January 2023 Week 1)
Wednesday	Sun, Sat, Fri, Thu, Wed, Tue, Mon	1st Jan, 31st Dec, 30th Dec, 29th Dec, 28th Dec, 3rd Jan, 2nd Jan
Wednesday	Mon, Tue, Wed, Thu, Fri, Sat, Sun	28th Dec, 29th Dec, 30th Dec, 31st Dec, 1st Jan, 2nd Jan, 3rd Jan
Wednesday	Wed, Fri, Mon, Thu, Sat, Sun, Tue	28th Dec, 30th Dec, 2nd Jan, 29th Dec, 31st Dec, 1st Jan, 3rd Jan
Wednesday	Mon, Thu, Sun	2nd Jan, 29th Dec, 1st Jan
Wednesday	Mon, Sun, Tue Tue, Mon	2nd Jan, 1st Jan, 3rd Jan, 3rd Jan, 2nd Jan

StartOfWeek	DayNamesOrder	Resulting Row (January 2023 Week 1)
Thursday	Mon, Tue, Wed, Thu, Fri, Sat, Sun	29th Dec, 30th Dec, 31st Dec, 1st Jan, 2nd Jan, 3rd Jan, 4th Jan
Thursday	Sun, Sat, Fri, Thu, Wed, Tue, Mon	1st Jan, 31st Dec, 30th Dec, 29th Dec, 4th Jan, 3rd Jan, 2nd Jan
Thursday	Wed, Fri, Mon, Thu, Sat, Sun, Tue	4th Jan, 30th Dec, 2nd Jan, 29th Dec, 31st Dec, 1st Jan, 3rd Jan
Thursday	Mon, Thu, Sun	2nd Jan, 29th Dec, 1st Jan
Thursday	Mon, Sun, Tue Tue, Mon	2nd Jan, 1st Jan, 3rd Jan, 3rd Jan, 2nd Jan

StartOfWeek	DayNamesOrder	Resulting Row (January 2023 Week 1)
Friday	Mon, Tue, Wed, Thu, Fri, Sat, Sun	30th Dec, 31st Dec, 1st Jan, 2nd Jan, 3rd Jan, 4th Jan, 5th Jan
Friday	Sun, Sat, Fri, Thu, Wed, Tue, Mon	1st Jan, 31st Dec, 30th Dec, 5th Jan, 4th Jan, 3rd Jan, 2nd Jan
Friday	Wed, Fri, Mon, Thu, Sat, Sun, Tue	4th Jan, 30th Dec, 2nd Jan, 5th Jan, 31st Dec, 1st Jan, 3rd Jan
Friday	Mon, Thu, Sun	2nd Jan, 5th Jan, 1st Jan
Friday	Mon, Sun, Tue Tue, Mon	2nd Jan, 1st Jan, 3rd Jan, 3rd Jan, 2nd Jan

StartOfWeek	DayNamesOrder	Resulting Row (January 2023 Week 1)
Saturday	Mon, Tue, Wed, Thu, Fri, Sat, Sun	31st Dec, 1st Jan, 2nd Jan, 3rd Jan, 4th Jan, 5th Jan, 6th Jan
Saturday	Sun, Sat, Fri, Thu, Wed, Tue, Mon	1st Jan, 31st Dec, 6th Jan, 5th Jan, 4th Jan, 3rd Jan, 2nd Jan
Saturday	Wed, Fri, Mon, Thu, Sat, Sun, Tue	4th Jan, 6th Jan, 2nd Jan, 5th Jan, 31st Dec, 1st Jan, 3rd Jan
Saturday	Mon, Thu, Sun	2nd Jan, 5th Jan, 1st Jan
Saturday	Mon, Sun, Tue Tue, Mon	2nd Jan, 1st Jan, 3rd Jan, 3rd Jan, 2nd Jan

StartOfWeek	DayNamesOrder	Resulting Row (January 2023 Week 1)
Sunday	Mon, Tue, Wed, Thu, Fri, Sat, Sun	1st Jan, 2nd Jan, 3rd Jan, 4th Jan, 5th Jan, 6th Jan, 7th Jan
Sunday	Sun, Sat, Fri, Thu, Wed, Tue, Mon	1st Jan, 7th Jan, 6th Jan, 5th Jan, 4th Jan, 3rd Jan, 2nd Jan
Sunday	Wed, Fri, Mon, Thu, Sat, Sun, Tue	4th Jan, 6th Jan, 2nd Jan, 5th Jan, 7th Jan, 1st Jan, 3rd Jan
Sunday	Mon, Thu, Sun	2nd Jan, 5th Jan, 1st Jan
Sunday	Mon, Sun, Tue Tue, Mon	2nd Jan, 1st Jan, 3rd Jan, 3rd Jan, 2nd Jan

Page Start Mode

You can set the date that the page starts on relative to the NavigatedDate by setting the PageStartMode property of the Calendar.

For Example:

• If Rows is set to 1, PageStartMode.FirstDayOfMonth would only ever display the first week of the NavigatedDate's month.
• If Rows is set to 6, PageStartMode.FirstDayOfYear would only ever display the first 6 weeks of the NavigatedDate's year.

Events/Appointments

To add events to the calendar use the calendar's events property. The calendar will add indicators on days that are within the start date and end date of an event. The position and shape of the indicators can be modified by using various properties and templates of a DayView inside the DayTemplate property of the CalendarView.

Localisation

The calendar uses CultureInfo.CurrentCulture for its logic. For example if StartOfWeek has not been set, it will default to CultureInfo.CurrentCulture.DateTimeFormat.FirstDayOfWeek.

CalendarView

The bare minimum needed to get the CalendarView working is to set the NavigatedDate, DayNamesOrder, and Days properties of the CalendarView.

Customising days

A day can be customised by setting the CalendarView's DayTemplate property.

If using a DayView, the essential properties you need to set to replicate existing functionality are the IsSelected, IsToday, IsCurrentMonth, and IsInvalid properties. You can view more info on how these states work as well as all the properties in the DayView at the DayView Properties wiki page.

Customising the days container

The container for days can be customised by setting the CalendarView's DaysViewTemplate property.

Customising the days of the week

To customise the look of each day of the week, the DayNameTemplate property of the CalendarView can be used. It is a DataTemplate with a BindingContext of DayOfWeek.

To change the TextColor for example you would put a Label in a DataTemplate and change the Label's TextColor property.

Customising the days of week container

There is also the DayNamesTemplate which lets you modify the container for the days of the week. This is a ControlTemplate.

Localisation

To change the displayed days of the week, change CultureInfo.CurrentUICulture.
To change the displayed month names, change CultureInfo.CurrentCulture.

Best to do this before InitializeComponent() in App.xaml.cs. In the future I may add a culture property to Calendar or CalendarView so that you don't have to set the culture for the entire application.