Calendar Mode in JavaScript Scheduler

The Scheduler supports two calendar modes to accommodate different regional and cultural requirements for date representation and event scheduling.

  • Gregorian Calendar
  • Islamic Calendar

Gregorian Calendar

The Scheduler displays Gregorian calendar dates by default, which is the most widely used calendar system worldwide. The Gregorian calendar is a solar calendar consisting of 12 months with 28 to 31 days each. A standard year contains 365 days, while a leap year (occurring when the year is divisible by four, with certain exceptions) contains 366 days.

Islamic Calendar

The Islamic calendar, also known as the Hijri or Muslim calendar, is a lunar calendar consisting of 12 months with a total of 354 or 355 days per year. Each month begins with the sighting of the new lunar cycle, resulting in months that alternate between 29 and 30 days. Typically, odd-numbered months contain 30 days while even-numbered months contain 29 days.

The Islamic calendar is lunar; its correspondence with Gregorian dates varies by year.

The Scheduler provides the calendarMode property to switch between Gregorian and Islamic calendar modes. This property accepts the values Gregorian (default) or Islamic. Setting this property to Islamic enables the Scheduler to display and process dates according to the Islamic calendar system. The following example demonstrates how to configure the Scheduler to display Islamic calendar dates.

To implement Islamic calendar functionality in the Scheduler, import the Calendar and Islamic modules from the ej2-calendars package and inject them using the Calendar.Inject method. Additionally, the following CLDR (Common Locale Data Repository) data files must be loaded using the loadCldr function:

  • numberingSystems.json
  • ca-gregorian.json
  • numbers.json
  • timeZoneNames.json
  • ca-islamic.json

For detailed instructions on installing and loading CLDR data, refer to the Internationalization documentation.

Refer to our JavaScript Scheduler feature tour page for an overview of key capabilities. You can also explore the JavaScript Scheduler example to learn how to present and manipulate data.