New to Telerik UI for .NET MAUI? Start a free 30-day trial

Styling the Calendar in Telerik Scheduler for .NET MAUI

Environment

Version Product Author
9.0.0 Telerik UI for .NET MAUI Scheduler Dobrinka Yordanova

Description

In Telerik Scheduler for .NET MAUI, you may need to change the text and selection colors of the drop-down calendar.

This knowledge base article also answers the following questions:

  • How to style the day names in the drop-down calendar of the Scheduler?
  • How to change the selection color in the calendar used by the Scheduler?
  • How to modify text colors in the Scheduler's drop-down calendar?

Solution

To customize the appearance of the drop-down calendar in the Telerik Scheduler for .NET MAUI, apply implicit styles targeting the RadCalendar component. Utilize a DayStyleSelector to define custom styles for different states of calendar labels such as normal, selected, and out-of-scope days.

1. Define a custom DayStyleSelector in the ResourceDictionary of your ContentPage. This selector allows specifying styles for various label states within the calendar.

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

2. Set the RadCalendar.DayStyleSelector property by using an implicit style:

<Style TargetType="telerik:RadCalendar" >
    <Setter Property="DayStyleSelector" Value="{StaticResource DayStyleSelector}" />
</Style>

3. Apply the RadScheduler to your ContentPage and set its CurrentDate and ViewDefinitions as needed. The custom styles defined in the DayStyleSelector will automatically apply to the drop-down calendar.

<telerik:RadScheduler AutomationId="scheduler" CurrentDate="10/18/2023">
    <telerik:RadScheduler.ViewDefinitions>
        <!-- View definitions for the scheduler -->
    </telerik:RadScheduler.ViewDefinitions>
</telerik:RadScheduler>

By following these steps, you can effectively change the text and selection colors of the drop-down calendar used in the Telerik Scheduler for .NET MAUI, enhancing the visual consistency and user experience of your application.

See Also

In this article