Localization and Formatting in WinUI Calendar DateRange Picker

18 Nov 20187 minutes to read

Types of Calendar

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

NOTE

When both the CalendarIdentifier and the FlowDirection properties are set, the 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

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

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

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

MainWindow.xaml

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

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

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

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 the DisplayDateFormat property is {0:d} - {1:d}.

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendarDateRangePicker x:Name="sfCalendarDateRangePicker"
                                        DisplayDateFormat="{}{0:D} - {1:D}" />
</Window>

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

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 name, or header name of month and year in the drop-down calendar by using the DayFormat, MonthFormat, DayOfWeekFormat, and MonthHeaderFormat properties.

NOTE

Refer to the DateTimeFormatter page to get more date formats.

MainWindow.xaml

<Window
    ...
     xmlns:calendar="using:Syncfusion.UI.Xaml.Calendar">
    <calendar:SfCalendarDateRangePicker x:Name="sfCalendarDateRangePicker"
                                        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;

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

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

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

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

Change flow direction

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

NOTE

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

MainWindow.xaml

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

MainWindow.xaml.cs

using Syncfusion.UI.Xaml.Calendar;

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

NOTE

Download demo from GitHub.