.NET MAUI Calendar Month Styling

The Calendar control for .NET MAUI provides the MonthStyleSelector(of type CalendarStyleSelector) property which specifies the style selector for the months in the year view of the Calendar.

The following example demonstrates how to style the months with the MonthStyleSelector property:

1. Define the Calendar:

<telerik:RadCalendar DisplayMode="Year" MonthStyleSelector="{StaticResource MonthStyleSelector}" />

2. The style selectors defined in the page's resources:

<ContentView.Resources>
    <local:CustomCalendarStyleSelector x:Key="MonthStyleSelector">
        <local:CustomCalendarStyleSelector.CustomOutOfScopeLabelStyle>
            <Style TargetType="telerik:CalendarLabel">
                <Setter Property="TextColor" Value="#558660C5" />
            </Style>
        </local:CustomCalendarStyleSelector.CustomOutOfScopeLabelStyle>
        <local:CustomCalendarStyleSelector.CustomNormalLabelStyle>
            <Style TargetType="telerik:CalendarLabel">
                <Setter Property="TextColor" Value="#8660C5" />
                <Setter Property="FontAttributes" Value="Bold" />
            </Style>
        </local:CustomCalendarStyleSelector.CustomNormalLabelStyle>
    </local:CustomCalendarStyleSelector>
</ContentView.Resources>

3. Add the CustomStyleSelector class that inherits from CalendarStyleSelector:

public class CustomCalendarStyleSelector : CalendarStyleSelector
{
    private Style customNormalLabelStyle;
    private Style customOutOfScopeLabelStyle;
    private Style customSelectedLabelStyle;
    private Style customSelectedMouseOverLabelStyle;
    private Style sundayMouseOverLabelStyle;
    private Style sundaySelectedLabelStyle;
    private Style sundaySelectedMouseOverLabelStyle;

    public override Style SelectStyle(object item, BindableObject container)
    {
        var node = (CalendarNode)item;
        var calendar = (RadCalendar)node.Calendar;
        bool isToday = node.IsToday;
        bool isSunday = calendar.DisplayMode == CalendarDisplayMode.Month && node.Date.Value.DayOfWeek == DayOfWeek.Sunday;
        bool isMouseOver = node.IsMouseOver;

        if (node.IsSelected)
        {
            return isMouseOver
                ? isSunday ? this.SundaySelectedMouseOverLabelStyle : this.CustomSelectedMouseOverLabelStyle
                : isSunday ? this.SundaySelectedLabelStyle : this.CustomSelectedLabelStyle;
        }

        if (isMouseOver)
        {
            return isSunday ? this.SundayMouseOverLabelStyle : base.SelectStyle(item, container);
        }

        if (isToday || !node.IsEnabled)
        {
            return base.SelectStyle(item, container);
        }

        if (node.IsOutOfScope)
        {
            return this.CustomOutOfScopeLabelStyle;
        }

        return isSunday ? this.SundayLabelStyle : this.CustomNormalLabelStyle;
    }

    public Style CustomNormalLabelStyle
    {
        get => customNormalLabelStyle;
        set
        {
            customNormalLabelStyle = value;
            customNormalLabelStyle.BasedOn = this.NormalLabelStyle;
        }
    }

    public Style CustomOutOfScopeLabelStyle
    {
        get => customOutOfScopeLabelStyle;
        set
        {
            customOutOfScopeLabelStyle = value;
            customOutOfScopeLabelStyle.BasedOn = this.OutOfScopeLabelStyle;
        }
    }

    public Style CustomSelectedLabelStyle
    {
        get => customSelectedLabelStyle;
        set
        {
            customSelectedLabelStyle = value;
            customSelectedLabelStyle.BasedOn = this.SelectedBorderStyle;
        }
    }

    public Style CustomSelectedMouseOverLabelStyle
    {
        get => customSelectedMouseOverLabelStyle;
        set
        {
            customSelectedMouseOverLabelStyle = value;
            customSelectedMouseOverLabelStyle.BasedOn = this.CustomSelectedLabelStyle;
        }
    }

    public Style SundayLabelStyle { get; set; }

    public Style SundayMouseOverLabelStyle
    {
        get => sundayMouseOverLabelStyle;
        set
        {
            sundayMouseOverLabelStyle = value;
            sundayMouseOverLabelStyle.BasedOn = this.SundayLabelStyle;
        }
    }

    public Style SundaySelectedLabelStyle
    {
        get => sundaySelectedLabelStyle;
        set
        {
            sundaySelectedLabelStyle = value;
            sundaySelectedLabelStyle.BasedOn = this.SundayLabelStyle;
        }
    }

    public Style SundaySelectedMouseOverLabelStyle
    {
        get => sundaySelectedMouseOverLabelStyle;
        set
        {
            sundaySelectedMouseOverLabelStyle = value;
            sundaySelectedMouseOverLabelStyle.BasedOn = this.SundayMouseOverLabelStyle;
        }
    }
}

For a runnable example demonstrating how to style the months in the Calendar, see the SDKBrowser Demo Application and go to Calendar > Style Selector.

See Also

• Day Styling
• Decade Styling
• Header Styling
• Year Styling