How to style the year, decade, and century views in the .NET MAUI Calendar (SfCalendar)?

2 mins read

In the Syncfusion® .NET MAUI Calendar, you can style the year, decade, and century views of the SfCalendar, through the following steps.

Step 1: Add the SfCalendar control.

XAML

<calendar:SfCalendar x:Name="calendar">
</calendar:SfCalendar>

Step 2: Use the MinimumDate and MaximumDate properties to disable dates before the minimum and after the maximum dates, and use the TodayHighlightBrush property to highlight the current day.

XAML

<calendar:SfCalendar x:Name="calendar"
                     MinimumDate="2012 12 31"
                     MaximumDate="2040 12 31"
                     TodayHighlightBrush="Black"
                     View="Decade">
</calendar:SfCalendar>

Step 3: Change the month format using the MonthFormat property of the CalendarYearView.

XAML

<calendar:SfCalendar.YearView>
    <calendar:CalendarYearView MonthFormat="MMMM">
    </calendar:CalendarYearView>
</calendar:SfCalendar.YearView>

Step 4: Alter the background color of the current day, leading dates, and disabled dates using the Background, TodayBackground, LeadingDatesBackground, and DisabledDatesBackground properties of the CalendarYearView.

XAML

<calendar:CalendarYearView MonthFormat="MMMM"
                           Background="#889e81"
                           TodayBackground="#698474"
                           LeadingDatesBackground="#bac7a7"
                           DisabledDatesBackground="#e5e4cc">
</calendar:CalendarYearView>

Step 5: Modify the text appearance for all dates, current date, leading dates, and disable dates using the TextStyle, TodayTextStyle, LeadingDatesTextStyle, and DisabledDatesTextStyle properties of the CalendarYearView, as shown in the following code sample.

XAML

<calendar:CalendarYearView MonthFormat="MMMM"
                           Background="#889e81"
                           TodayBackground="#698474"
                           LeadingDatesBackground="#bac7a7"
                           DisabledDatesBackground="#e5e4cc">
    <calendar:CalendarYearView.TextStyle>
        <calendar:CalendarTextStyle TextColor="WhiteSmoke"
                                    FontSize="15"
                                    FontAttributes="Italic" />
    </calendar:CalendarYearView.TextStyle>
    <calendar:CalendarYearView.TodayTextStyle>
        <calendar:CalendarTextStyle TextColor="WhiteSmoke"
                                    FontSize="15"
                                    FontAttributes="Italic" />
    </calendar:CalendarYearView.TodayTextStyle>
    <calendar:CalendarYearView.LeadingDatesTextStyle>
        <calendar:CalendarTextStyle TextColor="Gray"
                                    FontSize="15"
                                    FontAttributes="Bold" />
    </calendar:CalendarYearView.LeadingDatesTextStyle>
    <calendar:CalendarYearView.DisabledDatesTextStyle>
        <calendar:CalendarTextStyle TextColor="Gray"
                                    FontSize="15"
                                    FontAttributes="Italic" />
    </calendar:CalendarYearView.DisabledDatesTextStyle>
</calendar:CalendarYearView>

Output:

Year View	Decade View	Century View

Conclusion:

I hope you enjoyed learning how to style the year, decade, and century views in the .NET MAUI Calendar (SfCalendar).

You can refer to our .NET MAUI Calendar’s feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Calendar documentation to understand how to present and manipulate data.

For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our .NET MAUI Calendar and other .NET MAUI components.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)

How to style the year, decade, and century views in the .NET MAUI Calendar (SfCalendar)?

Access denied