---
title: "React Range Gregorian Jalali Hijri Example | Mobiscroll"
component: "Range"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/range/gregorian-jalali-hijri"
---

# Gregorian Jalali Hijri - React Range demo

Select a date range with Gregorian, Jalali (Persian), or Hijri (Arabic) calendar systems in the React date range picker. For React and Next.JS.

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

## Description

The date picker supports multiple calendar systems. You can control it with the [`calendarSystem`](https://mobiscroll.com/docs/react/datepicker/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/react/range/localization)

## What this demo shows

- Shows a date range picker example for selecting a start and end date from a monthly calendar.
- **Calendar system picker** The left side of the calendar 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.
- **Inline date range picker** This example embeds the date range picker directly in the page without an input by using inline display mode.
- **Start and end inputs** Clickable inputs appear above the calendar header. The active input has a white background, while the inactive input has a gray background. A clear button appears after a range is selected.
- **Header navigation** The month and year label in the upper-left corner opens the month and year picker. The previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header shows abbreviated day names from Sunday through Saturday, with dates arranged in a grid below.
- **Month navigation** Drag the calendar left or right to move between months.
- **Day cell states** Hovering over a day highlights its number with a gray background. The first selected day becomes the range start, and the second becomes the range end. Selected days are highlighted in blue. The current date is highlighted by default and remains blue when another date is selected.
- **Adjacent months** Dates from the previous and next months use a muted style. Selecting one navigates to its corresponding month.

## 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.

## Tutorial

### Pick a calendar system

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

```jsx
<Datepicker
    locale={localeEn}
/>
```

With "Jalali":

```jsx
<Datepicker
    calendarSystem={jalaliCalendar}
    locale={localeFa}
/>
```

With "Hijri":

```jsx
<Datepicker
    calendarSystem={hijriCalendar}
    locale={localeAr}
/>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/react/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/datepicker/api#opt-themeVariant) - option
- [`select`](https://mobiscroll.com/docs/react/datepicker/api#opt-select) - option
- [`display`](https://mobiscroll.com/docs/react/datepicker/api#opt-display) - option
- [`calendarSystem`](https://mobiscroll.com/docs/react/datepicker/api#localization-calendarSystem) - option
- [`locale`](https://mobiscroll.com/docs/react/datepicker/api#localization-locale) - option
- [`controls`](https://mobiscroll.com/docs/react/datepicker/api#opt-controls) - option

## Code

### JSX

```jsx
import { Datepicker, hijriCalendar, jalaliCalendar, localeAr, localeFa, setOptions } from '@mobiscroll/react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  return (
    <div>
      <Datepicker select="range" display="inline" />
      <Datepicker select="range" display="inline" calendarSystem={jalaliCalendar} locale={localeFa} />
      <Datepicker select="range" display="inline" calendarSystem={hijriCalendar} locale={localeAr} />
    </div>
  );
}

export default App;
```

### TSX

```tsx
import { Datepicker, hijriCalendar, jalaliCalendar, localeAr, localeFa, setOptions } from '@mobiscroll/react';
import { FC } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

const App: FC = () => (
  <div>
    <Datepicker controls={['calendar']} select="range" display="inline" />
    <Datepicker controls={['calendar']} select="range" display="inline" calendarSystem={jalaliCalendar} locale={localeFa} />
    <Datepicker controls={['calendar']} select="range" display="inline" calendarSystem={hijriCalendar} locale={localeAr} />
  </div>
);
export default App;
```

## Implementation notes

- Use `controls: ['calendar']`, `select: 'range'`, `display: 'inline'`, and `showRangeLabels: true` for the base range calendar.
- Set `calendarSystem` to switch the calendar rendering: `gregorianCalendar` (default, no Farsi/Arabic pack needed), `jalaliCalendar` (Persian calendar, requires the Farsi language pack), or `hijriCalendar` (requires the Arabic language pack).
- Pair each `calendarSystem` with the matching `locale`: `locale.fa` for Jalali, `locale.ar` for Hijri, `locale.en` (or omitted) for Gregorian - the calendar system and locale are set together, not independently.
- Import paths differ per framework: JS/jQuery reference them off the global namespace (`mobiscroll.jalaliCalendar`, `mobiscroll.locale.fa`); React/Angular/Vue import `jalaliCalendar`/`hijriCalendar`/`gregorianCalendar` and `localeFa`/`localeAr`/`localeEn` as named exports from `@mobiscroll/<framework>` and pass them as `calendarSystem`/`locale` values (React: `calendarSystem={jalaliCalendar}`; Angular: `[calendarSystem]="jalaliCalendar"`; Vue: `:calendarSystem="jalaliCalendar"`).
- Both `calendarSystem` and `locale` can be swapped at runtime via `.setOptions({ calendarSystem, locale })` on the picker instance without recreating the component.
- The selected start/end dates are set with `.setVal([startDate, endDate], true)`; the stored value is unaffected by which calendar system is used to display it.

## 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-react.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 react
   ```

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 react --trial`.

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

## Related demos

- Previous: [Event Hooks](https://demo.mobiscroll.com/react/range/event-hooks.md) - Attach custom logic to the React date range picker using lifecycle event hooks that fire on user interaction.
- Next: [Localization](https://demo.mobiscroll.com/react/range/localization.md) - Localize the React date range picker — set date and time formats, button labels, RTL support for 37 languages, with overridable settings.