--- title: "Javascript Timeline Multi-Language Support Example | Mobiscroll" component: "Timeline" framework: "JavaScript" library_version: "6.1.5" url: "https://demo.mobiscroll.com/javascript/timeline/localization" --- # Multi-Language Support - JavaScript Timeline demo Localize the Javascript Timeline across 37 languages — dates, times, labels, and RTL text direction adapt by locale, with manual override support. Plain JS api for usage everywhere. - [Live demo](https://demo.mobiscroll.com/javascript/timeline/localization) - [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/timeline/localization) - This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/timeline/localization.md), [Angular](https://demo.mobiscroll.com/angular/timeline/localization.md), [React](https://demo.mobiscroll.com/react/timeline/localization.md), [Vue](https://demo.mobiscroll.com/vue/timeline/localization.md) ## Description The components are fully localized. In case of the timeline this covers date and time format, button copy, rtl and more. You can see how each example shows up by clicking on the small flag icon or checking the examples below. **All settings can be manually overridden** [See what options the localization impacts →](https://mobiscroll.com/docs/javascript/eventcalendar/api#localization) ## What this demo shows - A desktop daily timeline where hours are arranged horizontally and a hierarchical resource tree arranged vertically on the left. - **Locale selector** Clicking the `Locale` dropdown opens a list of available locales that updates the timeline localization. - **Localization behavior** The localized setup affects date and time formatting, button labels, RTL layout support, and other built-in UI text and behaviors. - **Header navigation** The month and year label opens date navigation, while 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 days, with the current date highlighted. The timeline 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 are shown as colored cards with a left color stripe, a bold title, a description, and a bold time range. - **Date positioning** Events are positioned by their assigned resource and exact date and time 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 - **Multi-language calendar UIs** Apps that need the same timeline experience in multiple languages and regional formats. - **Region-specific event experiences** Products that need localized date formats, time formats, and translated interface copy without rebuilding the timeline UI. ## 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 - [`view`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-view) - option - [`resources`](https://mobiscroll.com/docs/javascript/eventcalendar/api#opt-resources) - option - [`setOptions`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setOptions) - method - [`locale`](https://mobiscroll.com/docs/javascript/eventcalendar/api#localization-locale) - option - [`setEvents`](https://mobiscroll.com/docs/javascript/eventcalendar/api#method-setEvents) - method ## Code ### JS ```js mobiscroll.setOptions({ theme: 'ios', themeVariant: 'light' }); var calendar = mobiscroll.eventcalendar('#demo-localization', { view: { timeline: { type: 'week' }, }, resources: [ { 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' }, ], }); document.getElementById('demo-localization-select').addEventListener('change', function () { calendar.setOptions({ locale: mobiscroll.locale[this.value], }); }); mobiscroll.getJson( 'https://trial.mobiscroll.com/timeline-events/', function (events) { calendar.setEvents(events); }, 'jsonp', ); ``` ### HTML ```html
``` ### CSS ```css .mds-full-height { height: 100%; } .mds-locale-cont .mbsc-col-sm-8 { margin: 0 auto; } ``` ## 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')`. React/Angular/Vue: assign the fetched array to the state/property bound to the `data` prop. Call `inst.setEvents(events)` for the imperative API. - **Locale switcher** - render a single `Dropdown` (Mobiscroll's `Dropdown` component) above the calendar. Populate it with ~35 language options (Arabic, Bulgarian, Catala, Cestina, Dansk, Deutsch, Greek, English, English-UK, Espanol, Farsi, Suomi, Français, Hebrew, Hindi, Croatian, Magyar, Italiano, Japanese, Korean, Lietuvių, Nederlands, Norsk, Polski, Português Brasileiro, Português Europeu, Română, Russian UA, Russian, Slovencina, Serbian, Svenska, Thai, Türkçe, Ukrainian, Vietnamese, Chinese). Default to `'en'`. - Pass `locale={locale[localeStr]}` to the `Eventcalendar`, where `locale` is the map object imported from Mobiscroll and `localeStr` is the currently selected language code. Changing the dropdown immediately re-renders the calendar in the new language including date formats, button labels, and RTL layout. - For the imperative API, attach a `change` listener to the select element and call `calendar.setOptions({ locale: mobiscroll.locale[value] })` on each change. - Wrap the page in a Mobiscroll `Page` component. Use a Mobiscroll grid with a single `mbsc-col-sm-8` column (centered with `margin: 0 auto`) for the dropdown, and a `mbsc-flex-1-1` container for the calendar to fill the remaining height. - Add `.mds-full-height { height: 100%; }` and `.mds-locale-cont .mbsc-col-sm-8 { margin: 0 auto; }` CSS rules. ## 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 - Previous: [Event Hooks](https://demo.mobiscroll.com/javascript/timeline/event-hooks.md) - Explore Javascript Timeline lifecycle hooks — see hooks fire on event clicks, initialization, and date changes, tracked in a live event log. - Next: [RTL Layout](https://demo.mobiscroll.com/javascript/timeline/rtl-right-to-left.md) - Build RTL scheduling interfaces with the Javascript Timeline — set direction or inherit it from locale settings to support right-to-left language users.