How to Customize the Month Cell with the SpecialDates, SelectableDayPredicate, and ShowTrailingAndLeadingDates in the .NET MAUI Calendar (SfCalendar)?

In the Syncfusion .NET MAUI Calendar control, customize the month cell with the SpecialDates, SelectableDayPredicate, and ShowTrailingAndLeadingDates properties of the SfCalendar through the following steps.

Step 1: Create the SfCalendar control as shown in the following code sample.

XAML

<ContentPage.Content>
    <calendar:SfCalendar x:Name="calendar">
        <calendar:SfCalendar.Behaviors>
            <local:CalendarBehavior />
        </calendar:SfCalendar.Behaviors>
    </calendar:SfCalendar>
</ContentPage.Content>

Step 2: Add a list of dates to the SpecialDates property of the SfCalendar’s MonthView to highlight specific dates and customize the background and the text style appearance of the special dates using the SpecialDatesBackground and SpecialDatesTextStyle properties as shown in the following code sample.

C#

this.calendar.MonthView.SpecialDates = new List<DateTime>
{
    DateTime.Now.AddDays(2),
    DateTime.Now.AddDays(4),
    DateTime.Now.AddDays(6),
    DateTime.Now.AddDays(-3),
    DateTime.Now.AddDays(-5),
    DateTime.Now.AddDays(-7),
};
 
this.calendar.MonthView.SpecialDatesBackground = Color.FromArgb("#FF7D7D");
this.calendar.MonthView.SpecialDatesTextStyle = new CalendarTextStyle()
{
    TextColor = Colors.White,
    FontSize = 15,
    FontAttributes = FontAttributes.Bold
};

Step 3: Use the SelectableDayPredicate property to disable specific dates on the SfCalendar by making the corresponding date cells unselectable. Use the DisabledDatesBackground and DisabledDatesTextStyle properties of the CalendarMonthView to change the disabled date’s background and text style. In the following code example, the weekend date cells are made unselectable.

C#

this.calendar.SelectableDayPredicate = (date) =>
{
    if (date.DayOfWeek == DayOfWeek.Sunday || date.DayOfWeek == DayOfWeek.Saturday)
    {
        return false;
    }
 
    return true;
};
 
this.calendar.MonthView.DisabledDatesBackground= Color.FromArgb("#DBDBDB");
this.calendar.MonthView.DisabledDatesTextStyle = new CalendarTextStyle()
{
    TextColor = Colors.Gray,
    FontSize = 15,
    FontAttributes = FontAttributes.Bold
};

Step 4: Set the ShowTrailingAndLeadingDates property to true or false to display or hide the previous and next month’s dates in the current month view. Use the TrailingLeadingDatesBackground and the TrailingLeadingDatesTextStyle properties of the CalendarMonthView to customize the appearance of the trailing and leading dates if they are made to display. The following code sample shows how to implement this step.

C#

this.calendar.ShowTrailingAndLeadingDates = false;
this.calendar.MonthView.TrailingLeadingDatesBackground = Color.FromArgb("#AEAEFF");
this.calendar.MonthView.TrailingLeadingDatesTextStyle = new CalendarTextStyle()
{
    TextColor = Colors.White,
    FontSize = 15,
    FontAttributes = FontAttributes.Bold
};

View sample on GitHub

Output:

When the ShowTrailingAndLeadingDates is false:

When the ShowTrailingAndLeadingDates is true:

Conclusion

I hope you enjoyed learning how to customize the month cell with the specialDates, selectableDayPredicate, and showTrailingAndLeadingDates 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!