Gregorian, Jalali & Hijri
The scheduler supports multiple calendar systems. You can control it with the calendarSystem setting, and it supports the following options:
- Gregorian - it is included by default
- Jalali - it is the default system of the Persian calendar and is included within the Farsi language pack
- Hijri - it is included in the Arabic language pack
Interested in localization? Explore this example →
Demo
Pick a calendar system
<mbsc-eventcalendar
[calendarSystem]=" "
[locale]=" ">
</mbsc-eventcalendar>
import { , } from '@mobiscroll/angular';
class myComponent {
public = ;
public = ;
}

ComponentTemplate
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import {
hijriCalendar,
jalaliCalendar,
localeAr,
localeEn,
localeFa,
MbscCalendarEvent,
MbscEventcalendarOptions,
MbscModule,
setOptions,
} from '@mobiscroll/angular';
setOptions({
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent implements OnInit {
constructor(private http: HttpClient) {}
myEvents: MbscCalendarEvent[] = [];
gregorianOptions: MbscEventcalendarOptions = {
locale: localeEn,
view: {
scheduler: { type: 'day' },
},
};
jalaliOptions: MbscEventcalendarOptions = {
calendarSystem: jalaliCalendar,
locale: localeFa,
view: {
scheduler: { type: 'day' },
},
};
hijriOptions: MbscEventcalendarOptions = {
calendarSystem: hijriCalendar,
locale: localeAr,
view: {
scheduler: { type: 'day' },
},
};
ngOnInit(): void {
this.http.jsonp<MbscCalendarEvent[]>('https://trial.mobiscroll.com/events/?vers=5', 'callback').subscribe((resp) => {
this.myEvents = resp;
});
}
}
<mbsc-page>
<div class="mbsc-grid">
<div class="mbsc-row">
<div class="mbsc-col-sm-12 mbsc-col-md-4">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Gregorian calendar</div>
<mbsc-eventcalendar [data]="myEvents" [options]="gregorianOptions"></mbsc-eventcalendar>
</div>
</div>
<div class="mbsc-col-sm-12 mbsc-col-md-4">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Jalali calendar</div>
<mbsc-eventcalendar [data]="myEvents" [options]="jalaliOptions"></mbsc-eventcalendar>
</div>
</div>
<div class="mbsc-col-sm-12 mbsc-col-md-4">
<div class="mbsc-form-group">
<div class="mbsc-form-group-title">Hijri calendar</div>
<mbsc-eventcalendar [data]="myEvents" [options]="hijriOptions"></mbsc-eventcalendar>
</div>
</div>
</div>
</div>
</mbsc-page>