.NET MAUI Calendar Day Styling

The Calendar control for .NET MAUI allows you to style the day names in the month view by setting the DayNameLabelStyle (Style with target type of Label) property.

The follwoing example demonstrates how to style the day names:

1. Define the Calendar:

<telerik:RadCalendar DayNameLabelStyle="{StaticResource DayNameLabelStyle}" />

2. Define the style for the day names:

<Style TargetType="Label" x:Key="DayNameLabelStyle">
    <Setter Property="TextColor" Value="#8660C5" />
    <Setter Property="FontSize" Value="16" />
</Style>

For a runnable example demonstrating how to style the days in the Calendar, see the SDKBrowser Demo Application and go to Calendar > Styling category.

Applying Style Selector

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 category.

See Also

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