-
-
Notifications
You must be signed in to change notification settings - Fork 39
Displaying Dates
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
StartOfWeekisDayOfWeek.Monday, the first row of February 2022 would be 1st Feb - 7th Feb. - When
StartOfWeekisDayOfWeek.Wednesday, the first row of February 2022 would be 26th Jan - 1st Feb - When
StartOfWeekisDayOfWeek.Sunday, the first row of February 2022 would be 31st Jan - 6th Feb
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 |
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
StartOfWeekproperty of the Calendar. - Then, the Calendar creates a default list of dates based on the days of week in the calculated order.
- If the
CustomDayNamesOrderproperty of the Calendar isnull, these default dates will be shown. - If the
CustomDayNamesOrderproperty of the Calendar is notnull, the Calendar will cherry-pick values from these default dates, mapping their DayOfWeek to the values specified in theCustomDayNamesOrderproperty and shows the result.
The CustomDayNamesOrder property supports duplicates and non-chronological orders, but must contain at least one value.
| 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 |
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
Rowsis set to 1,PageStartMode.FirstDayOfMonthwould only ever display the first week of theNavigatedDate's month. - If
Rowsis set to 6,PageStartMode.FirstDayOfYearwould only ever display the first 6 weeks of theNavigatedDate's year.
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.
The calendar uses CultureInfo.CurrentCulture for its logic. For example if StartOfWeek has not been set, it will default to CultureInfo.CurrentCulture.DateTimeFormat.FirstDayOfWeek.
The bare minimum needed to get the CalendarView working is to set the NavigatedDate, DayNamesOrder, and Days properties of the CalendarView.
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.
The container for days can be customised by setting the CalendarView's DaysViewTemplate property.
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.
There is also the DayNamesTemplate which lets you modify the container for the days of the week. This is a ControlTemplate.
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.