MAUI | ComponentOne
Controls / Calendar / Appearance Customization
In This Topic
    Appearance Customization
    In This Topic

    Calendar allows you to customize its appearance in different ways based on your requirements. You can choose to change the first day of the week displayed in the calendar, change the display format of the days and months, change calendar type, and hide the header and adjacent days. Let us dive into the details of all these features and their implementation in the following sections.

    Set First Day of Week

    By default, Calendar displays "Sunday" as the first day of the week. However, you can change it to display the first day of the week depending on your local culture using FirstDayOfWeek property of the C1Calendar class. The FirstDayOfWeek property uses DayOfWeek enumeration to specify the day of week to be set as the first day of the calendar week.

    The following image shows Monday set as the first day of the calendar week.

    Calendar showing Monday set as the first day of a week

    The following code uses the FirstDayOfWeek property to set "Monday" as the first week in the Calendar:

    <c1:C1Calendar x:Name="calendar" FirstDayOfWeek="Monday" />
    
    calendar.FirstDayOfWeek = DayOfWeek.Monday;
    

    Back to Top

    Customize Days of Week and Month Formats

    Calendar allows you to specify formats for displaying the names of the days in a week and the calendar months. You can set the format for representing the names of days in a week by using DayOfWeekFormat property of the C1Calendar class. Similarly, you can use HeaderMonthFormat property of the C1Calendar class to set the format for displaying month of the year in the Calendar control.

    Calendar with specified day and month format

    The following code showcases the use of DayOfWeekFormat and HeaderMonthFormat property to set the "dddd" day format and "MMMM" month format in the control, respectively.

    <c1:C1Calendar x:Name="calendar" DayOfWeekFormat="dddd" HeaderMonthFormat="MMMM" />
    
    calendar.DayOfWeekFormat = "dddd";
    calendar.HeaderMonthFormat = "MMMM";
    

    Back to Top

    Customize Header

    In the Calendar control, the header region has a huge significance. This is because, the Header when clicked expands the views, namely month, year and decade view. To elaborate, when you click the header in the 'month' (default) view, it expands to show the current year in the year view mode. Likewise, when the header of the 'year' or 'decade' view is clicked, it expands to show the current 'decade' or expands back to the month view, respectively.

    By default, Calendar displays the header. However, you can choose to hide the header area setting the ShowHeader property of the C1Calendar class to false.

    The following image showcases calendar without the header.

    Calendar control with hidden UI

    The following code shows how to hide the header by setting the ShowHeader property to false:

    <c1:C1Calendar x:Name="calendar" ShowHeader="False" />
    
    calendar.ShowHeader = false;
    

    Back to Top

    Hide Adjacent Days

    By default, the adjacent days are visible in the Calendar control. However, Calendar allows you to control the visibility of the adjacent days based on your requirements. It lets you choose whether to show the adjacent days at runtime. You can hide the adjacent days by setting the ShowAdjacentDay properties to false.

    MAUI Calendar control with hidden adjacent days

    To hide the adjacent dates in the Calendar control, you can set the ShowAdjacentDay property to false.

    <c1:C1Calendar x:Name="calendar" ShowAdjacentDay="False" />
    
    calendar.ShowAdjacentDay = false;
    

    Back to Top

    Calendar Type

    The Calendar control lets you set three types of calendars which are listed in the following table.

    Calendar Type Snapshot
    Default Default MAUI Calendar UI
    Gregorian Gregorian type calendar UI
    Japanese Japanese type calendar UI

    You can change the type of Calendar by setting the CalendarType property of the C1Calendar class. The CalendarType property uses the CalendarType enumeration to specify the calendar type to display as shown in the code snippet below:

    <c1:C1Calendar x:Name="calendar" CalendarType="Japanese" />
    
    calendar.CalendarType = C1.Maui.Calendar.CalendarType.Japanese;
    

    Back to Top