Localization and Formatting in WinUI Calendar Date Picker

22 Jul 20266 minutes to read

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

Types of calendar

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

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

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

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

NOTE

The value in the Calendar Date Picker control textbox is updated based on the 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 the Language property is en-US.

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendarDatePicker x:Name="sfCalendarDatePicker"
                                   Language="ar-SA"/>
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

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

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 the DisplayDateFormat property is d.

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendarDatePicker x:Name="sfCalendarDatePicker"
                                   DisplayDateFormat="M"/>
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

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

NOTE

Refer to this DateTimeFormatter page to get more date formatting options.

MainWindow.xaml

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

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

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 the week in the drop-down calendar using the FirstDayOfWeek property value. The default value of the FirstDayOfWeek property is Sunday.

MainWindow.xaml

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

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

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

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendarDatePicker x:Name="sfCalendarDatePicker"
                                   NumberOfWeeksInView="4"/>
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

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

NOTE

Download demo application from GitHub.