.NET MAUI Calendar Day Styling

The Calendar control for .NET MAUI provides the DayStyleSelector(of type CalendarStyleSelector) property which specifies the style selector for the days in the month views of the Calendar.

The following example demonstrates how to style the days with the DayStyleSelector property:

1. Define the Calendar:

<telerik:RadCalendar DisplayMode="Month" DayStyleSelector="{StaticResource DayStyleSelector}" />

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

<ContentView.Resources>
    <local:CustomCalendarStyleSelector x:Key="DayStyleSelector">
        <local:CustomCalendarStyleSelector.CustomSelectedLabelStyle>
            <Style TargetType="telerik:CalendarBorderLabel">
                <Setter Property="TextColor" Value="#04A2AA" />
                <Setter Property="FontAttributes" Value="Italic" />
                <Setter Property="BorderThickness" Value="0" />
                <Setter Property="BorderBackgroundColor" Value="#9AD9DD" />
            </Style>
        </local:CustomCalendarStyleSelector.CustomSelectedLabelStyle>
        <local:CustomCalendarStyleSelector.CustomSelectedMouseOverLabelStyle>
            <Style TargetType="telerik:CalendarBorderLabel">
                <Setter Property="BorderBackgroundColor" Value="#B3E3E5" />
            </Style>
        </local:CustomCalendarStyleSelector.CustomSelectedMouseOverLabelStyle>
        <local:CustomCalendarStyleSelector.CustomOutOfScopeLabelStyle>
            <Style TargetType="telerik:CalendarLabel">
                <Setter Property="TextColor" Value="#6104A2AA" />
            </Style>
        </local:CustomCalendarStyleSelector.CustomOutOfScopeLabelStyle>
        <local:CustomCalendarStyleSelector.CustomNormalLabelStyle>
            <Style TargetType="telerik:CalendarLabel">
                <Setter Property="TextColor" Value="#04A2AA" />
            </Style>
        </local:CustomCalendarStyleSelector.CustomNormalLabelStyle>
        <local:CustomCalendarStyleSelector.SundayLabelStyle>
            <Style TargetType="telerik:CalendarBorderLabel">
                <Setter Property="TextColor" Value="#FF9040" />
                <Setter Property="HorizontalTextAlignment" Value="Center" />
            </Style>
        </local:CustomCalendarStyleSelector.SundayLabelStyle>
        <local:CustomCalendarStyleSelector.SundayMouseOverLabelStyle>
            <Style TargetType="telerik:CalendarBorderLabel">
                <Setter Property="BorderBackgroundColor" Value="#FFE8D8" />
            </Style>
        </local:CustomCalendarStyleSelector.SundayMouseOverLabelStyle>
        <local:CustomCalendarStyleSelector.SundaySelectedLabelStyle>
            <Style TargetType="telerik:CalendarBorderLabel">
                <Setter Property="BorderBackgroundColor" Value="#FFDDC5" />
            </Style>
        </local:CustomCalendarStyleSelector.SundaySelectedLabelStyle>
        <local:CustomCalendarStyleSelector.SundaySelectedMouseOverLabelStyle>
            <Style TargetType="telerik:CalendarBorderLabel" />
        </local:CustomCalendarStyleSelector.SundaySelectedMouseOverLabelStyle>
    </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 days in the Calendar, see the SDKBrowser Demo Application and go to Calendar > Style Selector.

See Also

• Decade Styling
• Header Styling
• Month Styling
• Year Styling