Localize and change format in WinUI Calendar (SfCalendar)

22 Jul 20266 minutes to read

This section describes how to localize Calendar control using CalendarIdentifier and Language properties and to change the display formats.

Types of calendar

The Calendar control supports different types of calendars such as Gregorian, Julian, Hebrew, etc. You can change the calendar type by using the CalendarIdentifier property. The default value of the CalendarIdentifier property is GregorianCalendar.

You can select the required CalendarIdentifier value from the following types.

• JulianCalendar
• GregorianCalendar
• HebrewCalendar
• HijriCalendar
• KoreanCalendar
• TaiwanCalendar
• ThaiCalendar
• UmAlQuraCalendar
• PersianCalendar

NOTE

Japanese and Lunar type calendars are not supported in the Calendar control.

NOTE

When both the CalendarIdentifier and FlowDirection properties are set, the FlowDirection property takes precedence.

NOTE

The Calendar control updates the flow direction visually based on the CalendarIdentifier property value.

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendar x:Name="sfCalendar"
                         CalendarIdentifier="HebrewCalendar">
    </calendar:SfCalendar>
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

SfCalendar sfCalendar = new SfCalendar();
sfCalendar.CalendarIdentifier = "HebrewCalendar";

NOTE

Download demo application from GitHub.

Change the language

You can localize the calendar using the Language property. The default value of the Language property is en-US.

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendar x:Name="sfCalendar"
                         Language="fr-FR">
    </calendar:SfCalendar>
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

SfCalendar sfCalendar = new SfCalendar();
sfCalendar.Language = "fr-FR";

NOTE

Download demo application from GitHub.

First day of week

By default, Sunday is shown as the first day of the week. If you want to change the first day of the week, use the FirstDayOfWeek property value.

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendar x:Name="sfCalendar" 
                         FirstDayOfWeek="Monday">
    </calendar:SfCalendar>
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

SfCalendar sfCalendar = new SfCalendar();
sfCalendar.FirstDayOfWeek = FirstDayOfWeek.Monday;

NOTE

Download demo application from GitHub.

Change flow direction

You can change the flow direction of the Calendar layout from right to left by setting the FlowDirection property value to RightToLeft. The default value of the FlowDirection property is LeftToRight.

NOTE

When both the CalendarIdentifier and FlowDirection properties are set, the FlowDirection property takes precedence.

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendar x:Name="sfCalendar"
                         FlowDirection="RightToLeft">
    </calendar:SfCalendar>
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

SfCalendar sfCalendar = new SfCalendar();
sfCalendar.FlowDirection = FlowDirection.RightToLeft;

NOTE

Download demo application from GitHub.

Change date display format

You can use different date formats such as abbreviated or full names for a day, month, week names, or header name of month and year by using the DayFormat, MonthFormat, DayOfWeekFormat, and MonthHeaderFormat properties.

NOTE

Refer to the DateTimeFormatter page for more date formatting options.

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendar 
                         DayFormat="{}{day.integer(2)}"
                         MonthFormat="{}{month.full}"
                         DayOfWeekFormat="{}{dayofweek.abbreviated(3)}"
                         MonthHeaderFormat="{}{month.abbreviated} {year.abbreviated}‎"
                         x:Name="sfCalendar"/>
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

SfCalendar sfCalendar = new SfCalendar();
sfCalendar.DayFormat = "{day.integer(2)}";
sfCalendar.MonthFormat = "{month.full}";
sfCalendar.DayOfWeekFormat = "{dayofweek.abbreviated(3)}";
sfCalendar.MonthHeaderFormat = "{month.abbreviated} {year.abbreviated}‎";

NOTE

Download demo application from GitHub.

Number of weeks in a view

If you want to increase or decrease the number of weeks shown in a month view, use the NumberOfWeeksInView property. The default value of the NumberOfWeeksInView property is 6.

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendar x:Name="sfCalendar"
                         NumberOfWeeksInView="3">
    </calendar:SfCalendar>
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

SfCalendar sfCalendar = new SfCalendar();
sfCalendar.NumberOfWeeksInView = 3;

NOTE

Download demo application from GitHub.