---
title: "Javascript Scheduler Gregorian, Jalali & Hijri Example | Mobiscroll"
component: "Scheduler"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/scheduler/gregorian-jalali-hijri"
---

# Gregorian, Jalali & Hijri - JavaScript Scheduler demo

Switch the Javascript Scheduler between Gregorian, Jalali, and Hijri calendar systems — locale and language packs load automatically. Plain JS api for usage everywhere.

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

## Description

The scheduler 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/scheduler/localization)

## What this demo shows

- A desktop weekly scheduler layout with a fixed week strip at the top, a fixed all-day row below it, and a scrollable scheduler time grid for the selected week.
- **Calendar system picker** The left side of the scheduler 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 month and year label in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day.
- **Week view** The fixed strip below the header displays the days of the selected week, with the current date highlighted by a blue circle.
- **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid.
- **Time grid** The scheduler grid scrolls vertically through the hours of the selected week.
- **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title.
- **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts.
- **Current time** A blue current-time line appears across the time grid, with a small blue dot marking the current date.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event.

## 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
- [`clickToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-clickToCreate) - option
- [`dragToCreate`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToCreate) - option
- [`dragToMove`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToMove) - option
- [`dragToResize`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-dragToResize) - option
- [`eventDelete`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-eventDelete) - 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', {
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  eventDelete: true,
  locale: mobiscroll.localeEn,
  view: {
    scheduler: { type: 'day' },
  },
});

var jalali = mobiscroll.eventcalendar('#demo-jalali', {
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  eventDelete: true,
  calendarSystem: mobiscroll.jalaliCalendar,
  locale: mobiscroll.locale.fa,
  view: {
    scheduler: { type: 'day' },
  },
});

var hijri = mobiscroll.eventcalendar('#demo-hijri', {
  clickToCreate: true,
  dragToCreate: true,
  dragToMove: true,
  dragToResize: true,
  eventDelete: true,
  calendarSystem: mobiscroll.hijriCalendar,
  locale: mobiscroll.locale.ar,
  view: {
    scheduler: { 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

- Render three separate `Eventcalendar` instances on one page in a responsive 3-column grid (`mbsc-col-sm-12 mbsc-col-md-4`), each inside an `mbsc-form-group` with an `mbsc-form-group-title`. Use `view: { scheduler: { type: 'day' } }` for all three. Wrap the page in a `Page` component.
- **Gregorian instance** - no `calendarSystem` needed (Gregorian is the default). Angular and JS/jQuery also pass `locale: localeEn` explicitly; React and Vue omit it.
- **Jalali instance** - pass `calendarSystem: jalaliCalendar` and `locale: localeFa`, both imported from the Mobiscroll package. JS/jQuery: access as `mobiscroll.jalaliCalendar` and `mobiscroll.locale.fa`.
- **Hijri instance** - pass `calendarSystem: hijriCalendar` and `locale: localeAr`, both imported from the Mobiscroll package. JS/jQuery: access as `mobiscroll.hijriCalendar` and `mobiscroll.locale.ar`.
- Load events once from `https://trial.mobiscroll.com/events/?vers=5` via JSONP. For state-based frameworks (React/Vue/Angular), share one reactive events array bound to all three instances. For the imperative API (JS/jQuery), call `inst.setEvents(events)` on each of the three instances inside 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

- Next: [Event Hooks](https://demo.mobiscroll.com/javascript/scheduler/event-hooks.md) - Explore Javascript Scheduler lifecycle hooks — see which callbacks fire on event click, init, or date change in the live event log.