Multi-Calendar Support
The agenda 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
JSXTSX
import { Eventcalendar, getJson, hijriCalendar, jalaliCalendar, localeAr, localeEn, localeFa, Page, setOptions } from '@mobiscroll/react';
import { useEffect, useMemo, useState } from 'react';
setOptions({
theme: ' ',
themeVariant: ' '
});
function App() {
const [myEvents, setEvents] = useState([]);
const myView = useMemo(
() => ({
calendar: { type: 'week' },
agenda: { type: 'day' },
}),
[],
);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<Page>
<div className="mbsc-grid">
<div className="mbsc-row">
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Gregorian calendar</div>
<Eventcalendar data={myEvents} locale={localeEn} view={myView} />
</div>
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Jalali calendar</div>
<Eventcalendar data={myEvents} calendarSystem={jalaliCalendar} locale={localeFa} view={myView} />
</div>
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Hijri calendar</div>
<Eventcalendar data={myEvents} calendarSystem={hijriCalendar} locale={localeAr} view={myView} />
</div>
</div>
</div>
</div>
</Page>
);
}
export default App;
import {
Eventcalendar,
getJson,
hijriCalendar,
jalaliCalendar,
localeAr,
localeFa,
MbscCalendarEvent,
MbscEventcalendarView,
Page,
setOptions ,
} from '@mobiscroll/react';
import { FC, useEffect, useMemo, useState } from 'react';
setOptions({
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);
const myView = useMemo<MbscEventcalendarView>(
() => ({
calendar: { type: 'week' },
agenda: { type: 'day' },
}),
[],
);
useEffect(() => {
getJson(
'https://trial.mobiscroll.com/events/?vers=5',
(events: MbscCalendarEvent[]) => {
setEvents(events);
},
'jsonp',
);
}, []);
return (
<Page>
<div className="mbsc-grid">
<div className="mbsc-row">
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Gregorian calendar</div>
<Eventcalendar data={myEvents} view={myView} />
</div>
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Jalali calendar</div>
<Eventcalendar data={myEvents} calendarSystem={jalaliCalendar} locale={localeFa} view={myView} />
</div>
</div>
<div className="mbsc-col-sm-12 mbsc-col-md-4">
<div className="mbsc-form-group">
<div className="mbsc-form-group-title">Hijri calendar</div>
<Eventcalendar data={myEvents} calendarSystem={hijriCalendar} locale={localeAr} view={myView} />
</div>
</div>
</div>
</div>
</Page>
);
};
export default App;