Highlighting dates in UWP CalendarView

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:

https://gist.github.com/MartinZikmund/6e701f562c9743776029dff1cb208915

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:

https://gist.github.com/MartinZikmund/27316e5073ed3ac2055fae890e38fc44

When the user clicks the add button, we execute the following:

https://gist.github.com/MartinZikmund/38f47c922507deef98c921592537723b

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:

Adding Toolkit NuGet

Once installed, add the following using declaration to the top of your code-behind:

https://gist.github.com/MartinZikmund/f9c03286f989388b2b8176699a6ce946

And now let’s use it!

https://gist.github.com/MartinZikmund/1897291246c0ed49bca223ac07bf107f

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:

https://gist.github.com/MartinZikmund/b555e291b8184f07030652c81727a38a

Finally, we apply the knowledge from the previous blog post and handle the CalendarViewDayItemChanging event:

https://gist.github.com/MartinZikmund/043c562e181d5cc7c34a2c0bb0904241

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.

CalendarView highlighting
CalendarView highlighting
Buy me a coffeeBuy me a coffee

1 thought on “Highlighting dates in UWP CalendarView”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.