I have posted about UWP CalendarView control a while back. The previous post summarized how to customize calendar days while they are being assigned. A new StackOverflow question has prompted me to revisit this to show how already displayed dates can be adjusted as well.
Setting the scene
Consider the following simple XAML markup:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <StackPanel Padding="20" Spacing="20"> | |
| <DatePicker x:Name="Picker" /> | |
| <Button Click="Add_Click">Add</Button> | |
| <CalendarView CalendarViewDayItemChanging="Calendar_CalendarViewDayItemChanging" x:Name="Calendar" /> | |
| </StackPanel> |
What we will want to do is to let the user pick dates via the DatePicker and highlight them in the CalendarView.
Date highlighting
First will keep the selected dates in a collection of DateTimeOffset instances in the code-behind:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| private List<DateTimeOffset> _highlightedDates = new List<DateTimeOffset>(); |
When the user clicks the add button, we execute the following:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| private void Add_Click(object sender, RoutedEventArgs e) | |
| { | |
| _highlightedDates.Add(Picker.Date.Date); | |
| UpdateCalendar(); | |
| } |
The key logic will be in the UpdateCalendar method. This must enumerate all the currently displayed dates and ensure the ones which the user selected are highlighted. Unfortunately, CalendarView does not provide a friendly “Dates” or “Items” property so to get the individual CalendarViewDayItem instances, we will have to use VisualTreeHelper to crawl the visual tree of the calendar control and find all controls of given type. While the implementation is not that complex, its even better to avoid reinventing the wheel and just use the FindDescendants<T> extension method from Windows Community Toolkit!
First – install the Microsoft.Toolkit.Uwp.UI from NuGet:
Once installed, add the following using declaration to the top of your code-behind:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| using Microsoft.Toolkit.Uwp.UI.Extensions; |
And now let’s use it!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| private void UpdateCalendar() | |
| { | |
| var displayedDays = Calendar.FindDescendants<CalendarViewDayItem>(); | |
| foreach (var displayedDay in displayedDays) | |
| { | |
| if (_highlightedDates.Contains(displayedDay.Date.Date)) | |
| { | |
| HighlightDay(displayedDay); | |
| } | |
| else | |
| { | |
| UnHighlightDay(displayedDay); | |
| } | |
| } | |
| } |
We find all CalendarViewDayItem children of CalendarView, enumerate them and then check if the date matches one of the user selections. If yes, we highlight it. Conversely, we unhighlight (that is because the CalendarViewDayItem instances are reused, so we have to make sure their state is always set properly).
The highlight methods are very simple:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| private static void HighlightDay(CalendarViewDayItem displayedDay) | |
| { | |
| displayedDay.Background = new SolidColorBrush(Colors.Red); | |
| } | |
| private static void UnHighlightDay(CalendarViewDayItem displayedDay) | |
| { | |
| displayedDay.Background = new SolidColorBrush(Colors.Transparent); | |
| } |
Finally, we apply the knowledge from the previous blog post and handle the CalendarViewDayItemChanging event:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| private void Calendar_CalendarViewDayItemChanging(CalendarView sender, CalendarViewDayItemChangingEventArgs args) | |
| { | |
| if (_highlightedDates.Contains(args.Item.Date)) | |
| { | |
| HighlightDay(args.Item); | |
| } | |
| else | |
| { | |
| UnHighlightDay(args.Item); | |
| } | |
| } |
This is essentially the same thing logic as in UpdateCalendar, but here we are directly given a specific CalendarViewDayItem to work with.
Sample code
The example project is available on my GitHub.
1 thought on “Highlighting dates in UWP CalendarView”