Islamic calendar in React Calendar component
24 Jan 202315 minutes to read
In addition to the Gregorian calendar, the Calendar control supports displaying the Islamic calendar (Hijri calendar). 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 Islamic calendar, please refer this wikipedia.
Also, it consists of all Gregorian calendar functionalities as like min and max date, week number, start day of the week, multi selection, enable RTL, start and depth view, localization, highlight and customize the specific dates.
By default, calendar mode is in Gregorian. You can enable the Islamic mode by setting the calendarMode as Islamic. Also, need to import and injecting the Islamic module into the Calendar using the Inject directive from ej2-react-calendars as shown below.
import { Islamic } from ‘@syncfusion/ej2-react-calendars’;
By default, calendar mode is in Gregorian. You can enable the Islamic mode by setting the calendarMode as Islamic and injecting the Islamic module into the Calendar using the Inject directive.
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'));