Islamic calendar in React Calendar component
19 Mar 202615 minutes to read
In addition to the Gregorian calendar, the Calendar control supports the Islamic (Hijri) calendar. The Islamic calendar is a lunar calendar consisting of 12 months in a year of 354 or 355 days. To learn more, refer to this Wikipedia article.
The Calendar supports Gregorian features such as min/max date, week numbers, start day of the week, multi selection, RTL, start/depth views, localization, and date highlighting/customization.
By default, the calendar uses Gregorian mode. Enable Islamic mode by setting the calendarMode property to Islamic and injecting the Islamic module into the Calendar using the Inject directive from @syncfusion/ej2-react-calendars as shown below.
import { Islamic } from '@syncfusion/ej2-react-calendars';The following example demonstrates how to display the Islamic Calendar (Hijri Calendar).
[Class-component]
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'));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]
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'));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'));