Calendar Mode in ASP.NET Core Scheduler

The Scheduler supports the following two types of calendar mode:

  • Gregorian Calendar
  • Islamic Calendar

Gregorian Calendar

By default, the Scheduler displays Gregorian calendar dates, which are the most widely used calendar dates in the world. The Gregorian calendar is a solar calendar with 12 months, each having 28 to 31 days. A year divisible by four is considered a leap year in this calendar mode. A leap year usually has 366 days, whereas a regular year has 365 days.

Islamic Calendar

The Islamic calendar, also known as the Hijri or Muslim calendar, is a lunar calendar with 12 months in a year and 354 or 355 days. Each month denotes the beginning of a new lunar cycle, so each month can have 29 or 30 days depending on the visibility of the moon. In this calendar, odd-numbered months have 30 days and even-numbered months have 29 days.

NOTE

The current Islamic year is 1440 AH. The Gregorian calendar usually runs from approximately 11 September 2018 to 30 August 2019 for this 1440 AH year.

The Scheduler has a calendarMode property that is used to switch between Gregorian and Islamic calendar modes. By default, it is set to Gregorian, and to use Islamic calendar dates, set the Scheduler’s calendarMode to Islamic. The following example shows how to display Islamic calendar dates on the Scheduler.

It requires the following CLDR data to be loaded using the loadCldr function.

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

NOTE

For more information on installing the CLDR data, refer to the Internationalization topic.

@using Syncfusion.EJ2.Schedule

<ejs-schedule id="schedule" width="100%" height="550px" calendarMode ="Islamic" enableRtl="true" selectedDate="new DateTime(2018, 2, 15)">
    <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var scheduleObject = document.getElementById('schedule').ej2_instances[0];
        loadCultureFiles('de');
        scheduleObject.locale = 'de';
    });
    function loadCultureFiles(name) {
        var files = ['ca-gregorian.json', 'numberingSystems.json', 'numbers.json', 'timeZoneNames.json', 'ca-islamic.json'];
        var loader = ej.base.loadCldr;
        var loadCulture = function (prop) {
            var val, ajax;
            if (files[prop] === 'numberingSystems.json') {
                ajax = new ej.base.Ajax(location.origin + '/../wwwroot/cldr-data/supplemental/' + files[prop], 'GET', false);
            } else {
                ajax = new ej.base.Ajax(location.origin + '/../wwwroot/cldr-data/main/' + name + '/' + files[prop], 'GET', false);
            }
            ajax.onSuccess = function (value) {
                val = value;
            };
            ajax.send();
            loader(JSON.parse(val));
        };
        for (var prop = 0; prop < files.length; prop++) {
            loadCulture(prop);
        }
    }
</script>
public ActionResult Index()
{
    ViewBag.datasource = GetScheduleData();
    return View();
}

public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    { Id = 1, Subject = "Explosion of Betelgeuse Star", StartTime = new DateTime(2018, 2, 14, 9, 30, 0), EndTime = new DateTime(2018, 2, 14, 11, 0, 0) });
    appData.Add(new AppointmentData
    { Id = 2, Subject = "Thule Air Crash Report", StartTime = new DateTime(2018, 2, 15, 12, 0, 0), EndTime = new DateTime(2018, 2, 15, 14, 0, 0) });
    appData.Add(new AppointmentData
    { Id = 3, Subject = "Blue Moon Eclipse", StartTime = new DateTime(2018, 2, 16, 9, 30, 0), EndTime = new DateTime(2018, 2, 16, 11, 0, 0) });
    return appData;
}
    
public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
}

NOTE

However, this feature does not yet support recurrence options. Support for recurrence options is planned for a future release.

NOTE

You can refer to our ASP.NET Core Scheduler feature tour page for its feature highlights. You can also explore our ASP.NET Core Scheduler example to learn how to present and manipulate data.