Localization and Formatting in WinUI Calendar Date Picker

25 May 20225 minutes to read

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

Types of calendar

The Calendar Date Picker 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 Date Picker control.

NOTE

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

NOTE

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

MainWindow.xaml

<calendar:SfCalendarDatePicker x:Name="sfCalendarDatePicker"
                               CalendarIdentifier="HebrewCalendar"/>

MainWindow.xaml.cs

SfCalendarDatePicker sfCalendarDatePicker = new SfCalendarDatePicker();
sfCalendarDatePicker.CalendarIdentifier = "HebrewCalendar";

NOTE

The value in Calendar Date Picker control textbox is updated based on CalendarIdentifier property calendar type.

NOTE

Download demo application from GitHub.

Change the language

If you want to localize the drop-down calendar, use the Language property. The default value of Language property is en-US.

MainWindow.xaml

<calendar:SfCalendarDatePicker x:Name="sfCalendarDatePicker"
                               Language="ar-AR"/>

MainWindow.xaml.cs

SfCalendarDatePicker sfCalendarDatePicker = new SfCalendarDatePicker();
sfCalendarDatePicker.Language = "ar-AR";

NOTE

Download demo application from GitHub.

Change editor display format

You can edit and display the selected date with various formatting like date, month, and year formats by using the DisplayDateFormat property. The default value of DisplayDateFormat property is d.

MainWindow.xaml

<calendar:SfCalendarDatePicker x:Name="sfCalendarDatePicker" 
                               DisplayDateFormat="M"/>

MainWindow.xaml.cs

SfCalendarDatePicker sfCalendarDatePicker = new SfCalendarDatePicker();
sfCalendarDatePicker.DisplayDateFormat= "M";

NOTE

Download demo application from GitHub

Change calendar 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 in drop-down calendar by using the DayFormat, MonthFormat, DayOfWeekFormat, and HeaderFormatInMonthView properties.

NOTE

Refer to this DateTimeFormatter page to get more date formatting.

MainWindow.xaml

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

MainWindow.xaml.cs

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

NOTE

Download demo application from GitHub.

First day of week

You can change the first day of week in drop-down calendar using the FirstDayOfWeek property value. The default value of FirstDayOfWeek property is Sunday.

MainWindow.xaml

<calendar:SfCalendarDatePicker x:Name="sfCalendarDatePicker" 
                               FirstDayOfWeek="Monday"/>

MainWindow.xaml.cs

SfCalendarDatePicker sfCalendarDatePicker = new SfCalendarDatePicker();
sfCalendarDatePicker.FirstDayOfWeek = FirstDayOfWeek.Monday;

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 in drop-down calendar, use the NumberOfWeeksInView property. The default value of NumberOfWeeksInView property is 6.

MainWindow.xaml

<calendar:SfCalendarDatePicker x:Name="sfCalendarDatePicker"
                               NumberOfWeeksInView="4"/>

MainWindow.xaml.cs

SfCalendarDatePicker sfCalendarDatePicker = new SfCalendarDatePicker();
sfCalendarDatePicker.NumberOfWeeksInView = 4;

NOTE

Download demo application from GitHub.