Islamic Calendar in React Calendar

4 Sep 202615 minutes to read

In addition to the Gregorian calendar, the React Calendar control supports the Islamic (Hijri) React Calendar. An Islamic year has 354 or 355 days across 12 months in a lunar cycle. To learn more, refer to the Islamic calendar.

The React Calendar supports Gregorian features such as min/max date, week numbers, first day of the week, multi-selection, RTL, start/depth views, localization, and date highlighting/customization in Islamic mode.

By default, the React Calendar uses Gregorian mode. Enable Islamic mode by setting the calendarMode property to Islamic and injecting the Islamic module using the Inject directive from @syncfusion/ej2-react-calendars.

API

Property	Type	Default	Description
calendarMode	CalendarMode (Gregorian | Islamic)	Gregorian	Switches the React Calendar between Gregorian and Islamic modes.

import { Islamic } from '@syncfusion/ej2-react-calendars';

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

[Class-component]

index.jsx

import { addClass } from '@syncfusion/ej2-base';
// import the calendarcomponent
import { CalendarComponent, Inject, Islamic } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    calendarMode = 'Islamic';
    constructor(props) {
        super(props);
        this.disableDate = this.disableDate.bind(this);
    }
    // initialize the calendar mode
    disableDate(args) {
        /*Date need to be disabled*/
        if (args.date.getDate() === 2 || args.date.getDate() === 10 || args.date.getDate() === 28) {
            args.isDisabled = true;
        }
        if (args.date.getDate() === 13) {
            let span;
            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) {
            args.element.children[0].className += 'e-day sf-icon-start highlight';
            let span;
            span = document.createElement('span');
            span.setAttribute('class', 'sf-icons-star highlight');
            // 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);
        }
    }
    render() {
        return <CalendarComponent calendarMode={this.calendarMode} renderDayCell={this.disableDate}><Inject services={[Islamic]}/></CalendarComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

import { addClass } from '@syncfusion/ej2-base';
// import the calendarcomponent
import {  CalendarComponent, CalendarType, Inject, Islamic, RenderDayCellEventArgs } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {

    private calendarMode: CalendarType = 'Islamic';

    constructor(props: any) {
        super(props);
        this.disableDate = this.disableDate.bind(this);
    }
// initialize the calendar mode

    public disableDate(args: RenderDayCellEventArgs) {
        /*Date need to be disabled*/
        if ((args.date as Date).getDate() === 2 || (args.date as Date).getDate() === 10 || (args.date as Date).getDate() === 28) {
            args.isDisabled = true;
        }
        if ((args.date as Date).getDate() === 13) {
            let span: HTMLElement;
            span = document.createElement('span');
            (args.element as HTMLElement).children[0].className += 'e-day sf-icon-cup highlight';
            addClass([args.element as HTMLElement], ['special', 'e-day', 'dinner']);
            (args.element as HTMLElement).setAttribute('data-val', ' Dinner !');
            (args.element as HTMLElement).appendChild(span);
        }
        if ((args.date as Date).getDate() === 23) {
            (args.element as HTMLElement).children[0].className += 'e-day sf-icon-start highlight';
            let span: HTMLElement;
            span = document.createElement('span');
            span.setAttribute('class', 'sf-icons-star highlight');
            // use the imported method to add the multiple classes to the given element
            addClass([args.element as HTMLElement], ['special', 'e-day', 'holiday']);
            (args.element as HTMLElement).setAttribute('data-val', ' Holiday !');
            (args.element as HTMLElement).appendChild(span);
        }
   }

    public render() {
        return <CalendarComponent calendarMode={this.calendarMode} renderDayCell={this.disableDate} ><Inject services={[Islamic]} /></CalendarComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('element'));

[Functional-component]

index.jsx

import { addClass } from '@syncfusion/ej2-base';
// import the calendarcomponent
import { CalendarComponent, Inject, Islamic } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from 'react-dom';
function App() {
    const calendarMode = 'Islamic';
    // initialize the calendar mode
    function disableDate(args) {
        /*Date need to be disabled*/
        if (args.date.getDate() === 2 || args.date.getDate() === 10 || args.date.getDate() === 28) {
            args.isDisabled = true;
        }
        if (args.date.getDate() === 13) {
            let span;
            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) {
            args.element.children[0].className += 'e-day sf-icon-start highlight';
            let span;
            span = document.createElement('span');
            span.setAttribute('class', 'sf-icons-star highlight');
            // 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);
        }
    }
    return <CalendarComponent calendarMode={calendarMode} renderDayCell={disableDate}><Inject services={[Islamic]}/></CalendarComponent>;
}
;
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

import { addClass } from '@syncfusion/ej2-base';
// import the calendarcomponent
import {  CalendarComponent, CalendarType, Inject, Islamic, RenderDayCellEventArgs } from '@syncfusion/ej2-react-calendars';
import * as React from "react";
import * as ReactDOM from 'react-dom';

function App() {

    const calendarMode: CalendarType = 'Islamic';

    // initialize the calendar mode

    function disableDate(args: RenderDayCellEventArgs) {
        /*Date need to be disabled*/
        if ((args.date as Date).getDate() === 2 || (args.date as Date).getDate() === 10 || (args.date as Date).getDate() === 28) {
            args.isDisabled = true;
        }
        if ((args.date as Date).getDate() === 13) {
            let span: HTMLElement;
            span = document.createElement('span');
            (args.element as HTMLElement).children[0].className += 'e-day sf-icon-cup highlight';
            addClass([args.element as HTMLElement], ['special', 'e-day', 'dinner']);
            (args.element as HTMLElement).setAttribute('data-val', ' Dinner !');
            (args.element as HTMLElement).appendChild(span);
        }
        if ((args.date as Date).getDate() === 23) {
            (args.element as HTMLElement).children[0].className += 'e-day sf-icon-start highlight';
            let span: HTMLElement;
            span = document.createElement('span');
            span.setAttribute('class', 'sf-icons-star highlight');
            // use the imported method to add the multiple classes to the given element
            addClass([args.element as HTMLElement], ['special', 'e-day', 'holiday']);
            (args.element as HTMLElement).setAttribute('data-val', ' Holiday !');
            (args.element as HTMLElement).appendChild(span);
        }
    }
return <CalendarComponent calendarMode={calendarMode} renderDayCell={disableDate} ><Inject services={[Islamic]} /></CalendarComponent>

};
ReactDOM.render(<App />, document.getElementById('element'));