Islamic Calendar in Blazor DateTime Picker

27 Aug 20261 minute to read

In addition to the Gregorian calendar, the Blazor DateTime Picker component supports the Islamic (Hijri) calendar. The Islamic calendar is a lunar calendar, consisting of 12 months in a year of 354 or 355 days. Users can select a date from the Islamic calendar or manually enter a date. Additionally, helper methods such as ConvertToHijri and ConvertToGregorian can be used to convert dates between calendar systems.

The Blazor DateTime Picker retains its core features in Islamic mode, such as minimum and maximum date constraints, week numbers, first day of the week, right-to-left (RTL) support, Start and Depth views, localization, and the ability to highlight and customize specific dates. By default, the calendar mode is Gregorian.

Enable Islamic mode by setting the CalendarMode property to CalendarType.Islamic. The CalendarType enum is defined in the Syncfusion.Blazor.Calendars namespace and accepts Gregorian (default) or Islamic.

@using Syncfusion.Blazor.Calendars

<SfDateTimePicker TValue="DateTime?" CalendarMode="CalendarType.Islamic"></SfDateTimePicker>

The following example demonstrates a full setup that combines the Islamic calendar with the Arabic locale.

  • RAZOR
    • @using Syncfusion.Blazor.Calendars

<SfDateTimePicker TValue="DateTime?" CalendarMode="CalendarType.Islamic" FullScreen="true" ShowClearButton="true"></SfDateTimePicker>

    See also