---
title: "Javascript Agenda Multi-Calendar Support Example | Mobiscroll"
component: "Agenda"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/agenda/gregorian-jalali-hijri"
---

# Multi-Calendar Support - JavaScript Agenda demo

Display events in a Javascript agenda view with Gregorian, Jalali, and Hijri calendar system support — configure the calendar system per user locale. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/agenda/gregorian-jalali-hijri)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/agenda/gregorian-jalali-hijri)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/agenda/gregorian-jalali-hijri.md), [Angular](https://demo.mobiscroll.com/angular/agenda/gregorian-jalali-hijri.md), [React](https://demo.mobiscroll.com/react/agenda/gregorian-jalali-hijri.md), [Vue](https://demo.mobiscroll.com/vue/agenda/gregorian-jalali-hijri.md)

## Description

The agenda supports multiple calendar systems. You can control it with the [`calendarSystem`](https://mobiscroll.com/docs/javascript/eventcalendar/api#localization-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 →](https://demo.mobiscroll.com/javascript/agenda/localization)

## What this demo shows

- Shows a weekly agenda view with events listed and grouped by date.
- **Calendar system picker** The left side of the agenda shows a "Pick a calendar system" label with three options, where Gregorian is selected by default and choosing another option (Jalali or Hijri) updates the calendar system.
- **Header navigation** The date range label in the top left opens date navigation. The previous and next arrows and the Today button on the right move between months and jump back to the current date.
- **Agenda list** The area below the header lists events for the selected month. Events in the agenda are grouped by date.
- **Sticky day headers** As the agenda scrolls vertically, each day stays visible with a sticky date header while its events appear underneath.
- **Events** Events appear as agenda cards with a colored strip on the left and the event title next to it. Start and end times are stacked on the right side of timed events. All-day events show the all-day label on the right.
- **Event interaction** Hovering an event highlights it.
- **Event selection** Clicking an event selects and highlights it.

## Best for

- **Regional user experiences** Products that need to present dates in the calendar system users already rely on, such as Gregorian for international audiences, Jalali for Persian-speaking users, or Hijri for Arabic-speaking users.
- **Localized scheduling flows** Booking, planning, and event management interfaces where users need to browse months, review events, and select dates in a familiar calendar system.

## Tutorial

### Pick a calendar system

- (x) Gregorian
- ( ) Jalali
- ( ) Hijri

```js
locale: mobiscroll.localeEn
```

With "Jalali":

```js
calendarSystem: mobiscroll.jalaliCalendar,
locale: mobiscroll.localeFa
```

With "Hijri":

```js
calendarSystem: mobiscroll.hijriCalendar,
locale: mobiscroll.localeAr
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-themeVariant) - option
- [`locale`](https://mobiscroll.com/docs/javascript/eventcalendar/api#localization-locale) - option
- [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option
- [`calendarSystem`](https://mobiscroll.com/docs/javascript/eventcalendar/api#localization-calendarSystem) - option
- [`setEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setEvents) - method

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

var gregorian = mobiscroll.eventcalendar('#demo-gregorian', {
  locale: mobiscroll.localeEn,
  view: {
    calendar: { type: 'week' },
    agenda: { type: 'day' },
  },
});

var jalali = mobiscroll.eventcalendar('#demo-jalali', {
  calendarSystem: mobiscroll.jalaliCalendar,
  locale: mobiscroll.locale.fa,
  view: {
    calendar: { type: 'week' },
    agenda: { type: 'day' },
  },
});

var hijri = mobiscroll.eventcalendar('#demo-hijri', {
  calendarSystem: mobiscroll.hijriCalendar,
  locale: mobiscroll.locale.ar,
  view: {
    calendar: { type: 'week' },
    agenda: { type: 'day' },
  },
});

mobiscroll.getJson(
  'https://trial.mobiscroll.com/events/?vers=5',
  function (events) {
    gregorian.setEvents(events);
    jalali.setEvents(events);
    hijri.setEvents(events);
  },
  'jsonp',
);
```

### HTML

```html
<div 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>
          <div id="demo-gregorian"></div>
        </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>
          <div id="demo-jalali"></div>
        </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>
          <div id="demo-hijri"></div>
        </div>
      </div>
    </div>
  </div>
</div>
```

## Implementation notes

- Use a `Page` component with a `mbsc-grid` / `mbsc-row` / three `mbsc-col-sm-12 mbsc-col-md-4` columns to show three `Eventcalendar` instances side by side. Each uses `view: { calendar: { type: 'week' }, agenda: { type: 'day' } }`.
- Configure each instance with its calendar system and locale:
  - **Gregorian**: default (no `calendarSystem` needed), `locale: localeEn`
  - **Jalali**: `calendarSystem: jalaliCalendar`, `locale: localeFa`
  - **Hijri**: `calendarSystem: hijriCalendar`, `locale: localeAr`
  - Import `jalaliCalendar`, `hijriCalendar`, `localeEn`, `localeFa`, `localeAr` from the Mobiscroll package.
- Load events from `https://trial.mobiscroll.com/events/?vers=5` via JSONP once using `getJson(url, callback, 'jsonp')`. Angular: use `HttpClient.jsonp()`. Pass the same events array to all three instances. For the imperative API, call `inst.setEvents(events)` on all three instances in the callback.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-javascript.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config javascript
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config javascript --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation

## Related demos

- Previous: [Event Hooks](https://demo.mobiscroll.com/javascript/agenda/event-hooks.md) - Customize the Javascript event calendar agenda view with lifecycle hooks — respond to event clicks, init, and date changes.
- Next: [Localization](https://demo.mobiscroll.com/javascript/agenda/localization.md) - Switch the Javascript agenda between 37 languages — localize date and time formats, button labels, RTL layout, and override any setting manually.