---
title: "Vue Timeline RTL Layout Example | Mobiscroll"
component: "Timeline"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/timeline/rtl-right-to-left"
---

# RTL Layout - Vue Timeline demo

Build RTL scheduling interfaces with the Vue Timeline — set direction or inherit it from locale settings to support right-to-left language users. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/timeline/rtl-right-to-left)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/eventcalendar/timeline/rtl-right-to-left)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/eventcalendar/timeline/rtl-right-to-left)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/timeline/rtl-right-to-left.md), [jQuery](https://demo.mobiscroll.com/jquery/timeline/rtl-right-to-left.md), [Angular](https://demo.mobiscroll.com/angular/timeline/rtl-right-to-left.md), [React](https://demo.mobiscroll.com/react/timeline/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/vue/eventcalendar/api#localization-locale) settings.

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

## What this demo shows

- A desktop day timeline with hours arranged horizontally and resources arranged vertically on the right when RTL rendering is enabled.
- **RTL control** A side panel next to the timeline includes an `Enable Right-To-Left rendering` switch, which is enabled by default.
- **Header navigation** The month and year label opens date navigation, the previous and next arrows move between days, and the Today button returns to the current date.
- **Day view** The strip below the header shows the selected day, with the current date highlighted.
- **Timeline** The time grid displays hourly columns from 12 AM to 12 PM.
- **Resources** Multiple resources are shown as separate timeline rows.
- **Current time** A vertical blue line with a time label marks the current time.
- **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments.
- **Event cards** Events appear as colored cards with a left color stripe, a bold title, a description, and a bold time range.
- **Event positioning** Events are placed by their assigned resource and exact date range.
- **Event interaction** Events highlight on hover and show drag and resize handles for repositioning or changing duration.
- **Event selection** Clicking an event selects and highlights it.
- **Event creation** New events can be created by double-clicking the timeline or by clicking and dragging across a time range.
- **Scrolling** The timeline supports horizontal and vertical scrolling for navigating through time and resources.

## Best for

- **RTL scheduling interfaces** Building timeline views for products used in right-to-left languages such as Arabic, Hebrew, or Farsi.
- **Regional workforce planning** Managing shifts, assignments, or availability for teams working in RTL locales.
- **Resource scheduling systems** Displaying rooms, staff, equipment, or service teams in a mirrored timeline layout.
- **Multilingual applications** Supporting users who need the same scheduling workflow in both LTR and RTL rendering modes.
- **Localization testing** Verifying how timeline navigation, resources, event cards, scrolling, and drag interactions behave when RTL is enabled.

## Tutorial

### Enable Right-To-Left rendering

- [x] Turn RTL on

```vue
<template>
  <MbscEventcalendar
    rtl="true"
  />
</template>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-themeVariant) - option
- [`view`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-view) - option
- [`data`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-data) - option
- [`resources`](https://mobiscroll.com/docs/vue/eventcalendar/api#opt-resources) - option
- [`rtl`](https://mobiscroll.com/docs/vue/eventcalendar/api#localization-rtl) - option

## Code

### SFC JS

```vue
<script setup>
import { getJson, MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

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

const myEvents = ref([])
const myResources = ref([
  {
    id: 1,
    name: 'Ryan',
    color: '#fdf500'
  },
  {
    id: 2,
    name: 'Kate',
    color: '#ff4600'
  },
  {
    id: 3,
    name: 'John',
    color: '#ff0101'
  },
  {
    id: 4,
    name: 'Mark',
    color: '#239a21'
  },
  {
    id: 5,
    name: 'Sharon',
    color: '#8f1ed6'
  },
  {
    id: 6,
    name: 'Ashley',
    color: '#01adff'
  }
])

const myView = {
  timeline: { type: 'week' }
}

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/timeline-events/',
    (events) => {
      myEvents.value = events
    },
    'jsonp'
  )
})
</script>

<template>
  <MbscEventcalendar :view="myView" :data="myEvents" :resources="myResources" :rtl="true" />
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import { getJson, MbscEventcalendar, setOptions } from '@mobiscroll/vue'
import type { MbscCalendarEvent, MbscEventcalendarView, MbscResource } from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

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

const myEvents = ref<MbscCalendarEvent[]>([])
const myResources = ref<MbscResource[]>([
  {
    id: 1,
    name: 'Ryan',
    color: '#fdf500'
  },
  {
    id: 2,
    name: 'Kate',
    color: '#ff4600'
  },
  {
    id: 3,
    name: 'John',
    color: '#ff0101'
  },
  {
    id: 4,
    name: 'Mark',
    color: '#239a21'
  },
  {
    id: 5,
    name: 'Sharon',
    color: '#8f1ed6'
  },
  {
    id: 6,
    name: 'Ashley',
    color: '#01adff'
  }
])

const myView: MbscEventcalendarView = {
  timeline: { type: 'week' }
}

onMounted(() => {
  getJson(
    'https://trial.mobiscroll.com/timeline-events/',
    (events: MbscCalendarEvent[]) => {
      myEvents.value = events
    },
    'jsonp'
  )
})
</script>

<template>
  <MbscEventcalendar :view="myView" :data="myEvents" :resources="myResources" :rtl="true" />
</template>
```

## Implementation notes

- Use `timeline: { type: 'day' }` - a single-day timeline view.
- Define 6 resources with `id`, `name`, and `color`.
- Load events from `https://trial.mobiscroll.com/timeline-events/` via JSONP using `getJson(url, callback, 'jsonp')`. Call `inst.setEvents(events)` for the imperative API.
- Pass `rtl={true}` to the `Eventcalendar`. This flips the entire layout: the resource column moves to the right, the timeline scrolls right-to-left, and the header navigation mirrors accordingly.
- No locale needs to be set - `rtl` can be applied independently of locale. When a locale with built-in RTL support is applied (e.g. Arabic, Hebrew, Farsi), the `rtl` direction is inherited automatically from the locale without needing to set the prop explicitly.

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

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

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

## Related demos

- Previous: [Multi-Language Support](https://demo.mobiscroll.com/vue/timeline/localization.md) - Localize the Vue Timeline across 37 languages — dates, times, labels, and RTL text direction adapt by locale, with manual override support.