Unable to blackout whole months and years for calendarView component

Question

I am trying to make it so whole months and years are blackout'ed on my WinUI3 application, but for now I haven't been able to.

Our figma design is adamant that blackout months and years are a most helpful addition to our application, so I really want to deliver it.

For unique singular days, I was able to extract CalendarViewDayItem children from CalendarView and manage the IsBlackout property of them, but found out that there isn't any children named CalendarViewMonthYearItem for month or year objects.

I've tried blackin out every day on a month and on a year to see if the component would smartly handle it by automatically setting the IsBlackout property for months/years as true, but it doesn't seem to be the case.

After inspecting the application for more clarification of how the month objects are presented, I also noticed that they are considered to be CalendarViewItem objects as seen below: VisualTree For MonthItems showing a lot of CalendarViewItems

Following that, I've tried to search specifically for that type of child objects within a CalendarView component, but it doesn't seem to be a valid recognizable object to work with as seen below: CalendarView autosuggest on visual studio not showing CalendarViewItem as an option

I've run out of ideas for now, am I supposed to be doing something different here?

Answer 1

Unfortunately, there's no easy way to do this.

Let me show you an example about blacking out the header button.

private void SetCalendarViewHeaderButton(CalendarView calendarView, bool isBlackout)
{
    if (calendarView.FindDescendant<Button>(x => x.Name is "HeaderButton") is not Button headerButton ||
        headerButton.Parent is not Grid parentGrid ||
        headerButton.FindDescendant<TextBlock>() is not TextBlock contentTextBlock)
    {
        return;
    }
        
    if (isBlackout is false)
    {
        if (parentGrid.Children.OfType<Line>().FirstOrDefault(x => x.Name is "HeaderButtonBlackoutLine") is Line currentBlackoutLine)
        {
            parentGrid.Children.Remove(currentBlackoutLine);
        }

        headerButton.IsEnabled = true;
        return;
    }

    Line newBlackoutLine = new()
    {
        Name = "HeaderButtonBlackoutLine",
        Stroke = new SolidColorBrush(Colors.DarkGray),
        StrokeThickness = 1,
    };

    newBlackoutLine.X1 = headerButton.Margin.Left + headerButton.Padding.Left;
    newBlackoutLine.X2 = newBlackoutLine.X1 + contentTextBlock.ActualWidth;
    newBlackoutLine.Y1 = headerButton.Margin.Top + headerButton.Padding.Top;
    newBlackoutLine.Y2 = newBlackoutLine.Y1 + contentTextBlock.ActualHeight;

    parentGrid.Children.Add(newBlackoutLine);
}