Islamic Calendar in Angular Calendar

31 Aug 20265 minutes to read

In addition to the Gregorian calendar, the Calendar control supports the Islamic (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, please refer to this Wikipedia link. The Hijri month names are rendered from the loaded culture/CLDR data.

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

Enable the Islamic Calendar

By default, the calendar mode is Gregorian. The calendarMode property accepts Gregorian (default) or Islamic. You can enable the Islamic mode by setting the calendarMode to Islamic. When calendarMode is Islamic, the value property still accepts and returns a Gregorian Date object; the Calendar handles the Gregorian-to-Hijri conversion internally for display.

You also need to import and inject the IslamicService module into the providers section of the root NgModule or component class from @syncfusion/ej2-angular-calendars as shown below.

import { IslamicService } from '@syncfusion/ej2-angular-calendars';

Register the IslamicService in the providers of the NgModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CalendarModule, IslamicService } from '@syncfusion/ej2-angular-calendars';

@NgModule({
    imports: [BrowserModule, CalendarModule],
    providers: [IslamicService],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

The following example demonstrates how to display the Islamic Calendar (Hijri Calendar). The sample requires both calendarMode="Islamic" and the IslamicService registration shown above to work.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CalendarModule, IslamicService } from '@syncfusion/ej2-angular-calendars'




import { Component } from '@angular/core';
import { IslamicService } from '@syncfusion/ej2-angular-calendars';
import { addClass } from '@syncfusion/ej2-base';

@Component({
imports: [
        
        CalendarModule //declaration of ej2-angular-calendars module into NgModule
        
    ],

providers:[IslamicService],
standalone: true,
    selector: 'app-root',
    providers:[IslamicService],
    template: `
              <!-- Sets the isMultiSelection and values properties-->
            <ejs-calendar (renderDayCell)="onLoad($event)" (change)="onValueChange($event)" calendarMode='Islamic' class='e-customStyle'></ejs-calendar>`
})
export class AppComponent {
    constructor() {
    }
    onValueChange(args: any){}
    onLoad(args: any) {
         /*Date need to be disabled*/
         if (args.date.getDate() === 12 || args.date.getDate() === 17 || args.date.getDate() === 22) {
            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);
          }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also