Localize and change format in WinUI Calendar (SfCalendar)

31 May 20225 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 type of calendars such as Gregorian, Julian, Hebrew, etc. You can change the calendar type by using the CalendarIdentifier property. The default value of 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 Calendar control.

NOTE

When both the CalendarIdentifier and FlowDirection properties are set, the FlowDirection property is given higher precedence.

NOTE

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

MainWindow.xaml

<calendar:SfCalendar x:Name="sfCalendar"
                     CalendarIdentifier="HebrewCalendar">
</calendar:SfCalendar>

MainWindow.xaml.cs

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 Language property is en-US.

MainWindow.xaml

<calendar:SfCalendar x:Name="sfCalendar"
                     Language="fr-FR">
</calendar:SfCalendar>

MainWindow.xaml.cs

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 week, use the FirstDayOfWeek property value.

MainWindow.xaml

<calendar:SfCalendar x:Name="sfCalendar" 
                     FirstDayOfWeek="Monday">
</calendar:SfCalendar>

MainWindow.xaml.cs

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 as RightToLeft. The default value of FlowDirection property is LeftToRight.

NOTE

When both the CalendarIdentifier and FlowDirection properties are set, the FlowDirection property is given higher precedence.

MainWindow.xaml

<calendar:SfCalendar x:Name="sfCalendar"
                     FlowDirection="RightToLeft">
</calendar:SfCalendar>

MainWindow.xaml.cs

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 an 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 this DateTimeFormatter page to get more date formatting.

MainWindow.xaml

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

MainWindow.xaml.cs

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 NumberOfWeeksInView property is 6.

MainWindow.xaml

<calendar:SfCalendar x:Name="sfCalendar"
                     NumberOfWeeksInView="3">
</calendar:SfCalendar>

MainWindow.xaml.cs

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

NOTE

Download demo application from GitHub.