How can I help you?
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'));