Localization and Formatting in WinUI Calendar DateRange Picker

12 Mar 20246 minutes to read

Types of Calendar

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

NOTE

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

NOTE

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

MainWindow.xaml

<calendar:SfCalendarDateRangePicker x:Name="sfCalendarDateRangePicker"
                                    CalendarIdentifier="HebrewCalendar"/>

MainWindow.xaml.cs

SfCalendarDateRangePicker sfCalendarDateRangePicker = new SfCalendarDateRangePicker();
sfCalendarDateRangePicker.CalendarIdentifier = "HebrewCalendar";

NOTE

Download demo 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:SfCalendarDateRangePicker 
                               x:Name="sfCalendarDateRangePicker"
                               Language="ar-AR"/>

MainWindow.xaml.cs

SfCalendarDateRangePicker sfCalendarDateRangePicker = new SfCalendarDateRangePicker();
sfCalendarDateRangePicker.Language = "ar-AR";

NOTE

Download demo from Github.

Change editor display format

You can modify and display the selected date range with various formatting like date, month, and year formats by using the DisplayDateFormat property. The default value of DisplayDateFormat property is {0:d}-{1:d}.

MainWindow.xaml

<calendar:SfCalendarDateRangePicker x:Name="sfCalendarDateRangePicker" 
                                    DisplayDateFormat="{}{0:D} - {1:D}" />

MainWindow.xaml.cs

SfCalendarDateRangePicker sfCalendarDateRangePicker = new SfCalendarDateRangePicker();
sfCalendarDateRangePicker.DisplayDateFormat= "{0:D}-{1:D}";

NOTE

Download demo from Github.

Change calendar display format

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

NOTE

Refer to this DateTimeFormatter page to get more date formats.

MainWindow.xaml

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

MainWindow.xaml.cs

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

NOTE

Download demo from Github.

First day of week

By default, Sunday is shown as the first day of the week in the Calendar DateRange Picker controls’ drop-down calendar. You can change the first day of week by changing the FirstDayOfWeek property value.

MainWindow.xaml

<calendar:SfCalendarDateRangePicker x:Name="sfCalendarDateRangePicker" 
                                    FirstDayOfWeek="Monday"/>

MainWindow.xaml.cs

SfCalendarDateRangePicker sfCalendarDateRangePicker = new SfCalendarDateRangePicker();
sfCalendarDateRangePicker.FirstDayOfWeek = FirstDayOfWeek.Monday;

Change flow direction

By default, flow direction is changed automatically based on selected CalendarIdentifier value in Calendar DateRange Picker control. However, you can override it by explicitly specifying the FlowDirection property value. The default value of FlowDirection property is LeftToRight.

NOTE

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

MainWindow.xaml

<calendar:SfCalendarDateRangePicker 
                               x:Name="sfCalendarDateRangePicker"
                               FlowDirection="RightToLeft" />

MainWindow.xaml.cs

SfCalendarDateRangePicker sfCalendarDateRangePicker = new SfCalendarDateRangePicker();
sfCalendarDateRangePicker.FlowDirection = FlowDirection.RightToLeft;

NOTE

Download demo from Github.