How to Style Month Cells in the .NET MAUI Calendar (SfCalendar)?

5 mins read

In this guide, you'll learn how to style the month cells of the SfCalendar using the Syncfusion® .NET MAUI Calendar control.

Step 1: Create a ViewModel class and add a property WeekEndDayList to specify the weekend days. Bind this property to the CalendarMonthView’s WeekendDays property of the SfCalendar, as shown in the following code sample.

public class CalendarViewModel
{
    public List<DayOfWeek> WeekEndDayList { get; set; }
 
    public CalendarViewModel()
    {
        this.WeekEndDayList = new List<DayOfWeek>() { DayOfWeek.Sunday, DayOfWeek.Saturday };
    }
}

XAML

<ContentPage.BindingContext>
    <local:CalendarViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
    <calendar:SfCalendar x:Name="calendar">
        <calendar:SfCalendar.MonthView>
            <calendar:CalendarMonthView WeekendDays="{Binding WeekEndDayList}">
            </calendar:CalendarMonthView>
        </calendar:SfCalendar.MonthView>
    </calendar:SfCalendar>
</ContentPage.Content>

Step 2: You can change the selected shape and the selected background color of the SfCalendar month cell using the SelectionShape and SelectionBackground properties.

XAML

<calendar:SfCalendar x:Name="calendar"
                     SelectionBackground="#FEB8B8"
                     SelectionShape="Rectangle">
</calendar:SfCalendar>

Step 3: Change the MonthView’s background, current day background, weekend days background, and leading / trailing days background color using the SfCalendar’s CalendarMonthView properties: Background, TodayBackground, WeekendDatesBackground, and TrailingLeadingDatesBackground.

XAML

<calendar:SfCalendar.MonthView>
    <calendar:CalendarMonthView Background="#3F51B6"
                                TodayBackground="#FFFFFF"
                                TrailingLeadingDatesBackground="#CCD5F0"
                                WeekendDatesBackground="LightGray">
    </calendar:CalendarMonthView>
</calendar:SfCalendar.MonthView>

Step 4: Modify the month view’s text style, current date text style, weekend dates text style, and leading / trailing dates text style using the CalendarTextStyle properties: TextColor, FontSize, FontFamily, and FontAttributes.

XAML

<calendar:CalendarMonthView>
    <calendar:CalendarMonthView.TextStyle>
        <calendar:CalendarTextStyle TextColor="#FFFFFF"
                                    FontAttributes="Bold,Italic"
                                    FontSize="20" />
    </calendar:CalendarMonthView.TextStyle>
    <calendar:CalendarMonthView.TodayTextStyle>
        <calendar:CalendarTextStyle TextColor="Blue"
                                    FontAttributes="Bold,Italic"
                                    FontSize="20" />
    </calendar:CalendarMonthView.TodayTextStyle>
    <calendar:CalendarMonthView.WeekendDatesTextStyle>
        <calendar:CalendarTextStyle TextColor="Gray"
                                    FontAttributes="Bold,Italic"
                                    FontSize="20" />
    </calendar:CalendarMonthView.WeekendDatesTextStyle>
    <calendar:CalendarMonthView.TrailingLeadingDatesTextStyle>
        <calendar:CalendarTextStyle TextColor="Gray"
                                    FontAttributes="Bold,Italic"
                                    FontSize="20" />
    </calendar:CalendarMonthView.TrailingLeadingDatesTextStyle>
</calendar:CalendarMonthView>

Step 5: Style the CalendarMonthHeaderView using BackGround, Height, and TextFormat properties along with the CalendarTextStyle’s properties, as shown in the following code sample.

XAML

<calendar:CalendarMonthView.HeaderView>
    <calendar:CalendarMonthHeaderView Background="#C2FCF8"
                                      Height="50"
                                      TextFormat="ddd">
        <calendar:CalendarMonthHeaderView.TextStyle>
            <calendar:CalendarTextStyle TextColor="#1A73E8"
                                        FontAttributes="Bold,Italic"
                                        FontSize="20" />
        </calendar:CalendarMonthHeaderView.TextStyle>
    </calendar:CalendarMonthHeaderView>
</calendar:CalendarMonthView.HeaderView>

Download the complete sample on GitHub

Output

Month cell style in Syncfusion .NET MAUI Calendar

Conclusion

I hope you enjoyed learning how to style the month cell 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 also explore our .NET MAUI Calender 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 Month Cells in the .NET MAUI Calendar (SfCalendar)?

Access denied