Gregorian, Jalali & Hijri
The timeline 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,
MbscResource,
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[] = [];
myResources: MbscResource[] = [
{
id: 1,
name: 'Ryan',
color: '#fdf500',
},
{
id: 2,
name: 'Kate',
color: '#ff4600',
},
{
id: 3,
name: 'John',
color: '#ff0101',
},
{
id: 4,
name: 'Mark',
color: '#239a21',
},
{
id: 5,
name: 'Sharon',
color: '#8f1ed6',
},
{
id: 6,
name: 'Ashley',
color: '#01adff',
},
];
gregorianOptions: MbscEventcalendarOptions = {
locale: localeEn,
view: {
timeline: { type: 'day' },
},
};
jalaliOptions: MbscEventcalendarOptions = {
calendarSystem: jalaliCalendar,
locale: localeFa,
view: {
timeline: { type: 'day' },
},
};
hijriOptions: MbscEventcalendarOptions = {
calendarSystem: hijriCalendar,
locale: localeAr,
view: {
timeline: { type: 'day' },
},
};
ngOnInit(): void {
this.http.jsonp<MbscCalendarEvent[]>('https://trial.mobiscroll.com/timeline-events/', '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" [resources]="myResources" [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" [resources]="myResources" [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" [resources]="myResources" [options]="hijriOptions"></mbsc-eventcalendar>
</div>
</div>
</div>
</div>
</mbsc-page>