--- title: "React Timeline RTL Layout Example | Mobiscroll" component: "Timeline" framework: "React" library_version: "6.1.5" url: "https://demo.mobiscroll.com/react/timeline/rtl-right-to-left" --- # RTL Layout - React Timeline demo Build RTL scheduling interfaces with the React Timeline — set direction or inherit it from locale settings to support right-to-left language users. For React and Next.JS. - [Live demo](https://demo.mobiscroll.com/react/timeline/rtl-right-to-left) - [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/eventcalendar/timeline/rtl-right-to-left) - [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-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), [Vue](https://demo.mobiscroll.com/vue/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/react/eventcalendar/api#localization-locale) settings. **Explore the different locales** [Check out this example →](https://demo.mobiscroll.com/react/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 ```jsx ``` ## API used in this demo - [`theme`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-theme) - option - [`themeVariant`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-themeVariant) - option - [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) - option - [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - option - [`resources`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-resources) - option - [`rtl`](https://mobiscroll.com/docs/react/eventcalendar/api#localization-rtl) - option ## Code ### JSX ```jsx import { Eventcalendar, getJson, setOptions } from '@mobiscroll/react'; import { useEffect, useMemo, useState } from 'react'; setOptions({ theme: 'ios', themeVariant: 'light' }); function App() { const [myEvents, setEvents] = useState([]); const myResources = useMemo( () => [ { 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 = useMemo( () => ({ timeline: { type: 'day' }, }), [], ); useEffect(() => { getJson( 'https://trial.mobiscroll.com/timeline-events/', (events) => { setEvents(events); }, 'jsonp', ); }, []); return ; } export default App; ``` ### TSX ```tsx import { Eventcalendar, getJson, MbscCalendarEvent, MbscEventcalendarView, MbscResource, setOptions, } from '@mobiscroll/react'; import { FC, useEffect, useMemo, useState } from 'react'; setOptions({ theme: 'ios', themeVariant: 'light' }); const App: FC = () => { const [myEvents, setEvents] = useState([]); const myResources = useMemo( () => [ { 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 = useMemo( () => ({ timeline: { type: 'day' }, }), [], ); useEffect(() => { getJson( 'https://trial.mobiscroll.com/timeline-events/', (events: MbscCalendarEvent[]) => { setEvents(events); }, 'jsonp', ); }, []); return ; }; export default App; ``` ## 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-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: [Multi-Language Support](https://demo.mobiscroll.com/react/timeline/localization.md) - Localize the React Timeline across 37 languages — dates, times, labels, and RTL text direction adapt by locale, with manual override support.