--- title: "Javascript Agenda Localization Example | Mobiscroll" component: "Agenda" framework: "JavaScript" library_version: "6.1.5" url: "https://demo.mobiscroll.com/javascript/agenda/localization" --- # Localization - JavaScript Agenda demo Switch the Javascript agenda between 37 languages — localize date and time formats, button labels, RTL layout, and override any setting manually. Plain JS api for usage everywhere. - [Live demo](https://demo.mobiscroll.com/javascript/agenda/localization) - [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/eventcalendar/agenda/localization) - This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/agenda/localization.md), [Angular](https://demo.mobiscroll.com/angular/agenda/localization.md), [React](https://demo.mobiscroll.com/react/agenda/localization.md), [Vue](https://demo.mobiscroll.com/vue/agenda/localization.md) ## Description The components are fully localized. In case of the agenda 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 - Shows a mobile-friendly week calendar paired with a daily agenda list in a single view. - **Locale selector** Clicking the `Locale` dropdown opens a list of available locales that updates the agenda 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. The previous and next arrows and the Today button on the right move between weeks and jump back to the current date. - **Week view** A week calendar is displayed at the top of the view. - **Week navigation** The week strip can be changed by clicking and dragging 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. - **Event markers** Days with events show a small dot marker inside the day cell. - **Agenda list** The area below the calendar lists events for the selected day. - **Date selection** Selecting a day in the week calendar updates the agenda to show events for that date. - **Events** Events are displayed as agenda cards with a colored strip on the left, the event title next to it, and the start and end time stacked on the right. - **Event interaction** Hovering an event highlights it. - **Event selection** Clicking an event selects and highlights it, then shows a toast message with the event title. ## Best for - **Multi-language agenda UIs** Apps that need the same agenda 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 agenda 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 - [`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: { calendar: { type: 'week' }, agenda: { type: 'day' }, }, }); document.getElementById('demo-localization-select').addEventListener('change', function () { calendar.setOptions({ locale: mobiscroll.locale[this.value], }); }); mobiscroll.getJson( 'https://trial.mobiscroll.com/events/?vers=5', 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 `view: { calendar: { type: 'week' }, agenda: { type: 'day' } }`. Load events from `https://trial.mobiscroll.com/events/?vers=5` via JSONP using `getJson(url, callback, 'jsonp')`. Angular: use `HttpClient.jsonp()`. For the imperative API, call `inst.setEvents(events)` in the callback. - Import the `locale` map object from the Mobiscroll package. It maps locale codes (e.g. `'en'`, `'de'`, `'ar'`) to locale configuration objects. Pass `locale[localeCode]` to the `locale` option of the Eventcalendar. Changing the locale updates date/time formatting, button labels, first day of week, and RTL direction. - Add a Mobiscroll `Dropdown` (with `inputStyle: 'box'`, `labelStyle: 'stacked'`) populated with the full language list (~37 locales). On dropdown change, update the active locale code and re-pass `locale[localeCode]` to the Eventcalendar. For the imperative API, call `inst.setOptions({ locale: mobiscroll.locale[code] })` on change. Wrap the layout in a `Page` component with the Dropdown above and the Eventcalendar filling the remaining height. ## 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: [Multi-Calendar Support](https://demo.mobiscroll.com/javascript/agenda/gregorian-jalali-hijri.md) - Display events in a Javascript agenda view with Gregorian, Jalali, and Hijri calendar system support — configure the calendar system per user locale.