--- title: "JQuery Scheduler Localization Example | Mobiscroll" component: "Scheduler" framework: "jQuery" library_version: "6.1.5" url: "https://demo.mobiscroll.com/jquery/scheduler/localization" --- # Localization - jQuery Scheduler demo Add multi-language support to the JQuery Scheduler — 37 locales, RTL layout, and localized date/time formats, with all settings manually overridable. For jQuery or jQuery Mobile. - [Live demo](https://demo.mobiscroll.com/jquery/scheduler/localization) - [View code on GitHub](https://github.com/acidb/mobiscroll-demos-jquery/tree/main/src/demos/eventcalendar/scheduler/localization) - This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/scheduler/localization.md), [Angular](https://demo.mobiscroll.com/angular/scheduler/localization.md), [React](https://demo.mobiscroll.com/react/scheduler/localization.md), [Vue](https://demo.mobiscroll.com/vue/scheduler/localization.md) ## Description The components are fully localized. In case of the scheduler 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/jquery/eventcalendar/api#localization) ## What this demo shows - A desktop weekly scheduler layout with a fixed week strip at the top, a fixed all-day row below it, and a scrollable scheduler time grid for the selected week. - **Locale selector** Clicking the `Locale` dropdown opens a list of available locales that updates the scheduler 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 in the top left opens date navigation, while the blue previous and next arrows and the Today button on the right make it easy to move between weeks and jump back to the current day. - **Week view** The fixed strip below the header displays the days of the selected week, with the current date highlighted by a blue circle. - **All-day events** All-day events appear in a dedicated row that stays fixed above the time grid. - **Time grid** The scheduler grid scrolls vertically through the hours of the selected week. - **Timed events** Timed events are displayed in the weekly scheduler grid as colored cards with a colored stripe on the left, the event title in bold, and the exact start and end time displayed above the title. - **Event overlapping** If events overlap, the scheduler places them side by side without hiding any of them or causing other conflicts. - **Current time** A blue current-time line appears across the time grid, with a small blue dot marking the current date. - **Hover behavior** Hovering over the time grid shows a time indicator that follows the cursor in 15-minute increments. - **Event interaction** Hovering over events highlights them and shows drag and resize handles for repositioning or changing duration. - **Event selection** Clicking an event selects and highlights it. - **Event creation** Double-clicking the time grid or clicking and dragging on it creates a new event. ## Best for - **Multi-language calendar UIs** Apps that need the same scheduler 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 scheduler UI. ## API used in this demo - [`theme`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-theme) - option - [`themeVariant`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-themeVariant) - option - [`locale`](https://mobiscroll.com/docs/jquery/eventcalendar/api#localization-locale) - option - [`view`](https://mobiscroll.com/docs/jquery/eventcalendar/api#opt-view) - option - [`setOptions`](https://mobiscroll.com/docs/jquery/eventcalendar/api#method-setOptions) - method - [`setEvents`](https://mobiscroll.com/docs/jquery/eventcalendar/api#method-setEvents) - method ## Code ### JS ```js mobiscroll.setOptions({ theme: 'ios', themeVariant: 'light' }); $(function () { var calendar = $('#demo-localization') .mobiscroll() .eventcalendar({ locale: mobiscroll.localeEn, view: { scheduler: { type: 'week' }, }, }) .mobiscroll('getInst'); $('#demo-localization-select').on('change', function () { calendar.setOptions({ locale: mobiscroll.locale[$(this).val()], }); }); $.getJSON('https://trial.mobiscroll.com/events/?vers=5&callback=?', function (events) { calendar.setEvents(events); }); }); ``` ### HTML ```html
``` ### CSS ```css .mds-full-height { height: 100%; } .mds-locale-cont .mbsc-col-sm-8 { margin: 0 auto; } ``` ## Implementation notes - Use `view: { scheduler: { type: 'week' } }`. - Render a `Dropdown` above the calendar populated with ~35 language options (Arabic through Vietnamese). 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 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, call `inst.setOptions({ locale: mobiscroll.locale[value] })` on dropdown `change`. - Load events from `https://trial.mobiscroll.com/events/?vers=5` via JSONP using `getJson(url, callback, 'jsonp')`. For the imperative API, call `inst.setEvents(events)` in the callback. ## 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: [Event Hooks](https://demo.mobiscroll.com/jquery/scheduler/event-hooks.md) - Explore JQuery Scheduler lifecycle hooks — see which callbacks fire on event click, init, or date change in the live event log.