How to Customize the Selected Range Cells in the .NET MAUI Calendar (SfCalendar)?

In the Syncfusion .NET MAUI Calendar control, customize the selected range cells of the SfCalendar through the following steps.

Step 1: Add the SfCalendar control in your layout and set its SelectionMode property to Range as shown in the following code sample.

XAML

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

Step 2: Change the background color of the selected range cells using the SelectionBackground property of the SfCalendar as shown in the following code sample.

XAML

<calendar:SfCalendar x:Name="calendar"
                     SelectionMode="Range"
                     SelectionBackground="#FFFFC8">
</calendar:SfCalendar>

Step 3: Change the background color of the start date and end date of the selected range using the StartRangeSelectionBackground and EndRangeSelectionBackground properties of the SfCalendar as shown in the following code sample.

XAML

<calendar:SfCalendar x:Name="calendar"
                     SelectionMode="Range"
                     SelectionBackground="#FFFFC8"
                     StartRangeSelectionBackground="Green"
                     EndRangeSelectionBackground="Red">
</calendar:SfCalendar>

Step 4: Customize the appearance of the text for the start and end dates of a range, as well as for selected date ranges using the CalendarTextStyle properties, TextColor, FontSize, FontFamily, and FontAttributes of the SfCalendar’s CalendarMonthView properties, SelectionTextStyle, and RangeTextStyle. The following code sample shows how to implement these properties.

XAML

<calendar:SfCalendar.MonthView>
    <calendar:CalendarMonthView>
        <calendar:CalendarMonthView.SelectionTextStyle>
            <calendar:CalendarTextStyle TextColor="WhiteSmoke"
                                        FontSize="20"
                                        FontAttributes="Bold,Italic" />
        </calendar:CalendarMonthView.SelectionTextStyle>
        <calendar:CalendarMonthView.RangeTextStyle>
            <calendar:CalendarTextStyle TextColor="Gray"
                                        FontSize="20"
                                        FontAttributes="Bold,Italic" />
        </calendar:CalendarMonthView.RangeTextStyle>
    </calendar:CalendarMonthView>

Output:

Conclusion

I hope you enjoyed learning how to customize the selected range cells in the .NET MAUI Calendar (SfCalendar).

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, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our .NET MAUI Calendar and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!