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 to your layout.

XAML

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

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

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 to be displayed using the MonthFormat property of the CalendarYearView, as shown in the following code sample.

XAML

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

Step 4: Change the background color of all 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: Change the appearance of the text for all, 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:

Hope you enjoyed learning about 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. You can 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