.NET MAUI Calendar Header Styling

The .NET MAUI Calendar component comes with built-in styling options that allow you to customize the appearance of its header.

Styling the Header Border and Label

• To style the border around the Calendar header, use the HeaderBorderStyle(of type Style with target type telerik:RadBorder).

• To style the label in the header, use the HeaderLabelStyle(of type Style with target type Label).

The following example demonstrates how to apply custom styles to the header label and the border around the header:

1. Define the Calendar:

<telerik:RadCalendar HeaderBorderStyle="{StaticResource HeaderBorderStyle}"
                     HeaderLabelStyle="{StaticResource HeaderLabelStyle}" />

2. Add the HeaderBorderStyle style:

<Style TargetType="telerik:RadBorder" x:Key="HeaderBorderStyle">
    <Setter Property="BackgroundColor" Value="#198660C5" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Padding" Value="{OnPlatform Default='16, 8', Android=0, WinUI='12, 4'}" />
</Style>

3. Add the HeaderLabelStyle style:

<Style TargetType="Label" x:Key="HeaderLabelStyle">
    <Setter Property="TextColor" Value="#8660C5" />
    <Setter Property="FontSize" Value="20" />
    <Setter Property="FontAttributes" Value="Italic" />
</Style>

For a runnable example that demonstrates how to style the Calendar header buttons, see the SDKBrowser Demo Application and go to Calendar > Styling.

Styling the Navigation Buttons

To style the navigation buttons in the header of the Calendar, use the following properties:

• NavigateToPreviousViewButtonStyle(of type Style with target type Button)—Specifies the style for the button in the header that navigates to the previous view.
• NavigateToNextViewButtonStyle(of type Style with target type Button)—Specifies the style for the button in the header that navigates to the next view.

The following example demonstrates how to apply custom styles to the navigation buttons:

1. Define the Calendar:

<telerik:RadCalendar NavigateToPreviousViewButtonStyle="{StaticResource NavigateToPreviousViewButtonStyle}"
                     NavigateToNextViewButtonStyle="{StaticResource NavigateToNextViewButtonStyle}" />

2. Add the NavigateToPreviousViewButtonStyle style:

<Style TargetType="Button" x:Key="NavigateToPreviousViewButtonStyle">
    <Setter Property="FontFamily" Value="TelerikFontExamples" />
    <Setter Property="FontSize" Value="20" />
    <Setter Property="Text" Value="&#xf137;" />
    <Setter Property="TextColor" Value="#FFAC3E" />
</Style>

3. Add the NavigateToNextViewButtonStyle style:

For a runnable example that demonstrates how to style the Calendar header buttons, see the SDKBrowser Demo Application and go to Calendar > Styling.

See Also

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