Highlighting a day in CalendarView XAML

Question

To practice creating UWP applications, I am creating a library system with user logins. Once a user logs in they are greeted with a screen containing a calendar of their book return dates. I want to highlight the days on the calendar which their books are due. Once they click on a book, it will load a popup containing the book information.

I have a function to populate the calendar with the highlighted dates but I cannot figure out how to highlight a particular calendar item.

CS:

private void PopulateCalendar()
    {
        User user = PageController.loggedIn;

        List<DateTimeOffset> highlightedDates = new List<DateTimeOffset>();
        foreach (Loan loan in user.Loans)
        {
            highlightedDates.Add(loan.ReturnDate);
        }

        //highlight the dates
    }

XAML:

<Page
x:Class="FirstUWPProject.UserPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:FirstUWPProject"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" d:DesignWidth="1280" d:DesignHeight="720">

<Grid>
    <Button x:Name="logOutButton" Margin="1040,610,0,0" VerticalAlignment="Top" Height="60" Width="160"
            Click="LogOutClicked"
            Content="Log Out" FontSize="20" CornerRadius="10,10,10,10"/>
    <Button x:Name="homeButton" Margin="80,610,0,0" VerticalAlignment="Top" Height="60" Width="160"
            Click="HomeClickedUser"
            Content="Home" FontSize="20" CornerRadius="10,10,10,10"/>
    <CalendarView  x:Name="calendarView" Margin="800,80,0,0" VerticalAlignment="Top" Height="400" Width="400" SelectedDatesChanged="CalendarViewSelectedDatesChanged"/>
</Grid>

Answer 1

CalendarView doesn't have a property that could let you access the CalendarViewItem directly. So if you want to get some specific items of the CalendarView and change its color, you might need to use the DependencyObjectExtensions from Windows Community Toolkit. This extension exposes several APIs to aid in using the VisualTreeHelper class. The VisualTreeHelper class could go through the Visual Tree at runtime and find the target element for you.

First of all, you have to install the Windows Community Toolkit NuGet Package. Right-click on your project name and select Manage NuGet Packages. Search for Microsoft.Toolkit.UWP.UI, then install it.

In the code-behind, add the namespaces to the toolkit:

using Microsoft.Toolkit.Uwp.UI;

Then you could use it to update the CalendarViewItem.

  private void UpdateCalendarView()
    {
        var calendarViewDays = calendarView.FindDescendants().OfType<CalendarViewDayItem>();
        foreach (var singleDay in calendarViewDays)
        {
            if (highlightedDates.Contains(singleDay.Date.Date))
            {
                //highlight
                singleDay.Background = new SolidColorBrush(Colors.Red);
            }
        }
    }