Islamic Calendar in EJ2 TypeScript Calendar

4 Sep 20264 minutes to read

In addition to the Gregorian calendar, the Calendar supports displaying the Islamic calendar (Hijri calendar). The Islamic calendar or Hijri calendar is a lunar calendar consisting of 12 months in a year of 354 or 355 days. To know more about the Islamic calendar, refer to this wikipedia link.

It also consists of all Gregorian calendar functionalities such as min and max date, week number, start day of the week, multi selection, enable RTL, start and depth view, localization, and highlighting and customizing the specific dates.

By default, the calendar mode is in Gregorian. The Islamic mode can be enabled by setting the calendarMode as Islamic. Also, import and inject the Islamic module from ej2-calendars as shown below.

import { Islamic, Calendar } from ‘@syncfusion/ej2-calendars’;\
Calendar.Inject(Islamic);

The following example demonstrates how to display the Islamic Calendar (Hijri Calendar).

import { Calendar, Islamic, RenderDayCellEventArgs } from '@syncfusion/ej2-calendars';
import { addClass } from '@syncfusion/ej2-base';
// 'Islamic' module injection
Calendar.Inject(Islamic);

//creates a calendar with islamic mode.
let calendarObject: Calendar = new Calendar({
    // To display the Islamic calendar
    calendarMode: 'Islamic',
    renderDayCell: customDates
});
calendarObject.appendTo('#element');

function customDates(args: RenderDayCellEventArgs): void {
  /*Date need to be disabled*/
  if ( args.date.getDate() === 12 || args.date.getDate() === 17 || args.date.getDate() === 28) {
    args.isDisabled = true;
  }
  /*Dates need to be customized*/
  if (args.date.getDate() === 13) {
    let span: HTMLElement;
    span = document.createElement('span');
    args.element.children[0].className += 'e-day sf-icon-cup highlight';
    addClass([args.element], ['special', 'e-day', 'dinner']);
    args.element.setAttribute('data-val', ' Dinner !');
    args.element.appendChild(span);
  }
  if (args.date.getDate() === 23) {
    let span: HTMLElement;
    span = document.createElement('span');
    args.element.children[0].className += 'e-day sf-icon-start highlight';
    span.setAttribute('class', 'sx !');
    //use the imported method to add the multiple classes to the given element
    addClass([args.element], ['special', 'e-day', 'holiday']);
    args.element.setAttribute('data-val', ' Holiday !');
    args.element.appendChild(span);
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Calendar control</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <!--style reference from the Calendar component-->
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/material.css" rel="stylesheet" />
    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <!--element which is going to render the Calendar-->
        <div id='element'></div>
    </div>
</body>

</html>