---
title: "JQuery Calendar Right-to-Left Example | Mobiscroll"
component: "Calendar"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/calendar/rtl-right-to-left"
---

# Right-to-Left - jQuery Calendar demo

Use a JQuery calendar date picker with RTL support — enable right-to-left layout or inherit it from locale settings for Arabic, Hebrew, or Farsi. For jQuery or jQuery Mobile.

- [Live demo](https://demo.mobiscroll.com/jquery/calendar/rtl-right-to-left)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-jquery/tree/main/src/demos/datepicker/calendar/rtl-right-to-left)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/calendar/rtl-right-to-left.md), [Angular](https://demo.mobiscroll.com/angular/calendar/rtl-right-to-left.md), [React](https://demo.mobiscroll.com/react/calendar/rtl-right-to-left.md), [Vue](https://demo.mobiscroll.com/vue/calendar/rtl-right-to-left.md)

## Description

RTL support is built in and can be explicitly controlled through the `rtl` option. If not set, it is inherited from the [`locale`](https://mobiscroll.com/docs/jquery/datepicker/api#localization-locale) settings.

**Explore the different locales** [Check out this example →](https://demo.mobiscroll.com/jquery/calendar/localization)

## What this demo shows

- Shows date picker examples for selecting a single date.
- **RTL control** A side panel next to the date picker calendar includes an `Enable Right-To-Left rendering` switch, which is enabled by default.
- **Header navigation** The month and year label in the upper-right corner opens the month and year picker. The previous and next arrow buttons on the left navigate between months.
- **Month view** A fixed weekday header displays abbreviated day names from Sunday through Saturday, with the dates arranged in a grid below it.
- **Month navigation** The month can be changed by clicking and dragging the calendar left or right.
- **Day cell states** Hovering a day highlights the day number with a gray background. Selecting a day highlights the day number with a blue background. The current date is highlighted by default and remains blue when the user selects another date.
- **Adjacent months** Dates from the previous and next months appear with a muted style. Selecting one navigates the calendar to the corresponding month.

## Best for

- **RTL interfaces** Building date picker calendars for products used in right-to-left languages such as Arabic, Hebrew, or Farsi.
- **Multilingual applications** Supporting users who need the same date picker workflow in both LTR and RTL rendering modes.

## Tutorial

### Enable Right-To-Left rendering

- [x] Turn RTL on

```js
$('#calendar').mobiscroll().datepicker({
    rtl: true
});
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-controls) - option
- [`rtl`](https://mobiscroll.com/docs/jquery/datepicker/api#localization-rtl) - option
- [`display`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-display) - option

## Code

### JS

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

$(function () {
  $('#demo')
    .mobiscroll()
    .datepicker({
      controls: ['calendar'],
      rtl: true,
      display: 'inline',
    });
});
```

### HTML

```html
<div id="demo"></div>
```

## Implementation notes

- Use `controls: ['calendar']` and `display: 'inline'`.
- Set `rtl: true` to mirror the entire calendar layout - header, weekday row, day grid, and navigation arrows all flip to right-to-left; `rtl: false` (or omitting it) renders left-to-right.
- Toggle at runtime via `setOptions({ rtl: true | false })` on the instance.
- Pair `rtl` with a matching RTL `locale` (e.g. `mobiscroll.locale.ar`, `mobiscroll.locale.he`) when the language itself is right-to-left, since `rtl` only controls layout direction, not translated day/month names.

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

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

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

## Related demos

- Previous: [Localization](https://demo.mobiscroll.com/jquery/calendar/localization.md) - Localize a JQuery date picker across 37 languages — configure regional date/time formats, RTL layout, and button labels, with manual overrides.