.NET MAUI Calendar Content Styling

Updated over 6 months ago

The Calendar control for .NET MAUI provides the following styling properties for customizing the appearance of its content:

• DayStyleSelector(of type CalendarStyleSelector)—Specifies the style selector for the days in the month view of the Calendar.
• MonthStyleSelector(of type CalendarStyleSelector)—Specifies the style selector for the months in the year view of the Calendar.
• YearStyleSelector(of type CalendarStyleSelector)—Specifies the style selector for the years in the decade view of the Calendar.
• DecadeStyleSelector(of type CalendarStyleSelector)—Specifies the style selector for the decades in the century view of the Calendar.

The CalendarStyleSelector class exposes the following properties listed in the table below:

CalendarStyleSelector	Description
NormalLabelStyle(of type Style with target type telerik:CalendarLabel)	Gets the style applied to the CalendarLabel when in normal state.
DisabledLabelStyle(of type Style with target type telerik:CalendarLabel)	Gets the style applied to the CalendarLabel when in disabled state.
OutOfScopeLabelStyle(of type Style with target type telerik:CalendarLabel)	Gets the style applied to the CalendarLabel when in out of scope state.
SelectedBorderStyle(of type Style with target type telerik:CalendarBorderLabel)	Gets the style applied to the CalendarBorderLabel when the date is selected.
MouseOverBorderStyle(of type Style with target type telerik:CalendarBorderLabel)	Gets the style applied to the CalendarBorderLabel when the date has the mouse over it.
SelectedMouseOverBorderStyle(of type Style with target type telerik:CalendarBorderLabel)	Gets the style applied to the CalendarBorderLabel when the date has the mouse over it and is selected.
TodayBorderStyle(of type Style with target type telerik:CalendarBorderLabel)	Gets the style applied to the CalendarBorderLabel for the today date.
TodayMouseOverBorderStyle(of type Style with target type telerik:CalendarBorderLabel)	Gets the style applied to the CalendarBorderLabel for the date that has the mouse over it and is today.
TodaySelectedBorderStyle(of type Style with target type telerik:CalendarBorderLabel)	Gets the style applied to the CalendarBorderLabel when the today date is selected.
TodaySelectedMouseOverBorderStyle(of type Style with target type telerik:CalendarBorderLabel)	Gets the style applied to the CalendarBorderLabel for the date that has the mouse over it, is today and it is selected.
TodayFirstInRangeBorderStyle(of type Style with target type telerik:CalendarBorderLabel)	Gets the style applied to the CalendarBorderLabel for the today date when selected and is first in range.
TodayFirstInRangeMouseOverBorderStyle(of type Style with target type telerik:CalendarBorderLabel)	Gets the style applied to the CalendarBorderLabel for the today date when selected and mouse over and is first in range.
TodayMiddleInRangeBorderStyle(of type Style with target type telerik:CalendarBorderLabel)	Gets the style applied to the CalendarBorderLabel for the today date when selected and is middle in range.
TodayMiddleInRangeMouseOverBorderStyle(of type Style with target type telerik:CalendarBorderLabel)	Gets the style applied to the CalendarBorderLabel for the today date when selected and mouse over and is middle in range.
TodayLastInRangeBorderStyle(of type Style with target type telerik:CalendarBorderLabel)	Gets the style applied to the CalendarBorderLabel for the today date when selected and is last in range.
TodayLastInRangeMouseOverBorderStyle(of type Style with target type telerik:CalendarBorderLabel)	Gets the style applied to the CalendarBorderLabel for the today date when selected and mouse over and is last in range.
FirstInRangeBorderStyle(of type Style with target type telerik:CalendarBorderLabel)	Gets the style applied to the CalendarBorderLabel for the selected date when is first in range.
FirstInRangeMouseOverBorderStyle(of type Style with target type telerik:CalendarBorderLabel)	Gets the style applied to the CalendarBorderLabel for the selected date that has the mouse over it and it is first in range selection.
MiddleInRangeBorderStyle(of type Style with target type telerik:CalendarBorderLabel)	Gets the style applied to the CalendarBorderLabel for the selected date when is middle in range.
MiddleInRangeMouseOverBorderStyle(of type Style with target type telerik:CalendarBorderLabel)	Gets the style applied to the CalendarBorderLabel for the selected date that has the mouse over it and it is middle in range selection.
LastInRangeBorderStyle(of type Style with target type telerik:CalendarBorderLabel)	Gets the style applied to the CalendarBorderLabel for the selected date when is last in range.
LastInRangeMouseOverBorderStyle(of type Style with target type telerik:CalendarBorderLabel)	Gets the style applied to the CalendarBorderLabel for the selected date that has the mouse over it and it is last in range selection

When inheriting from CalendarStyleSelector, override the SelectStyle method and cast the object item to CalendarNode. The CalendarNode is the model that is visualized in the Calendar's views.

The CalendarNode class has the information for:

• date—The date that each node holds and that gets displayed in the Calendar's view.
• Text—The text that is displayed in the Calendar's view.
• IsSelected(bool)—Gets a value indicating whether the node is selected
• IsEnabled(bool)—Gets a value indicating whether the node is enabled.
• IsOutOfScope(bool)—Gets a value indicating whether the node is out of scope.
• IsToday(bool)—Gets a value indicating whether the date is today.
• IsMouseOver(bool)—Gets a value indicating whether the mouse is over the date.
• IsVisible(bool)—Gets a value indicating whether the node is visible.
• SelectionState(enum of type Telerik.Maui.controls.Calendar.CalendarNodeSelectionState)—Gets a value indicating the state of the date when selected. The options are: None, Single, Middle, First and Last.

The following example demonstrates the CustomStyleSelector class that inherits from CalendarStyleSelector:

c#

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;
        }
    }
}

See Also

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