---
title: "React Agenda Localization Example | Mobiscroll"
component: "Agenda"
framework: "React"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/react/agenda/localization"
---

# Localization - React Agenda demo

Switch the React agenda between 37 languages — localize date and time formats, button labels, RTL layout, and override any setting manually. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/agenda/localization)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/eventcalendar/agenda/localization)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/eventcalendar/agenda/localization)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/agenda/localization.md), [jQuery](https://demo.mobiscroll.com/jquery/agenda/localization.md), [Angular](https://demo.mobiscroll.com/angular/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/react/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/react/eventcalendar/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-themeVariant) - option
- [`locale`](https://mobiscroll.com/docs/react/eventcalendar/api#localization-locale) - option
- [`data`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-data) - option
- [`view`](https://mobiscroll.com/docs/react/eventcalendar/api#opt-view) - option

## Code

### JSX

```jsx
import { Dropdown, Eventcalendar, getJson, locale, Page, setOptions } from '@mobiscroll/react';
import { useCallback, useEffect, useMemo, useState } from 'react';

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

function App() {
  const [localeStr, setLocaleStr] = useState('en');
  const [myEvents, setEvents] = useState([]);

  const languages = useMemo(
    () => [
      { name: 'Arabic', value: 'ar' },
      { name: 'Bulgarian', value: 'bg' },
      { name: 'Catala', value: 'ca' },
      { name: 'Cestina', value: 'cs' },
      { name: 'Dansk', value: 'da' },
      { name: 'Deutsch', value: 'de' },
      { name: 'Greek', value: 'el' },
      { name: 'English', value: 'en' },
      { name: 'English-UK', value: 'en-GB' },
      { name: 'Espanol', value: 'es' },
      { name: 'Farsi', value: 'fa' },
      { name: 'Suomi', value: 'fi' },
      { name: 'Français', value: 'fr' },
      { name: 'Hebrew', value: 'he' },
      { name: 'Hindi', value: 'hi' },
      { name: 'Croatian', value: 'hr' },
      { name: 'Magyar', value: 'hu' },
      { name: 'Italiano', value: 'it' },
      { name: 'Japanese', value: 'ja' },
      { name: 'Korean', value: 'ko' },
      { name: 'Lietuvių', value: 'lt' },
      { name: 'Nederlands', value: 'nl' },
      { name: 'Norsk', value: 'no' },
      { name: 'Polski', value: 'pl' },
      { name: 'Português Brasileiro', value: 'pt-BR' },
      { name: 'Português Europeu', value: 'pt-PT' },
      { name: 'Română', value: 'ro' },
      { name: 'Russian UA', value: 'ru-UA' },
      { name: 'Russian', value: 'ru' },
      { name: 'Slovencina', value: 'sk' },
      { name: 'Serbian', value: 'sr' },
      { name: 'Svenska', value: 'sv' },
      { name: 'Thai', value: 'th' },
      { name: 'Türkçe', value: 'tr' },
      { name: 'Ukrainian', value: 'ua' },
      { name: 'Vietnamese', value: 'vi' },
      { name: 'Chinese', value: 'zh' },
    ],
    [],
  );

  const myView = useMemo(
    () => ({
      calendar: { type: 'week' },
      agenda: { type: 'day' },
    }),
    [],
  );

  const handleChange = useCallback((event) => {
    setLocaleStr(event.target.value);
  }, []);

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com/events/?vers=5',
      (events) => {
        setEvents(events);
      },
      'jsonp',
    );
  }, []);

  return (
    <Page className="mds-full-height">
      <div className="mds-locale-cont mds-full-height mbsc-flex-col">
        <div className="mbsc-grid">
          <div className="mbsc-row">
            <div className="mbsc-col-sm-8">
              <Dropdown inputStyle="box" label="Locale" labelStyle="stacked" value={localeStr} onChange={handleChange}>
                {languages.map((lang) => (
                  <option key={lang.value} value={lang.value}>
                    {lang.name}
                  </option>
                ))}
              </Dropdown>
            </div>
          </div>
        </div>
        <div className="mds-overflow-hidden mbsc-flex-1-1">
          <Eventcalendar locale={locale[localeStr]} data={myEvents} view={myView} />
        </div>
      </div>
    </Page>
  );
}

export default App;
```

### TSX

```tsx
import { Dropdown, Eventcalendar, getJson, locale, MbscCalendarEvent, MbscEventcalendarView, Page, setOptions } from '@mobiscroll/react';
import { ChangeEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';

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

const App: FC = () => {
  const [localeStr, setLocaleStr] = useState('en');
  const [myEvents, setEvents] = useState<MbscCalendarEvent[]>([]);

  const languages = useMemo(
    () => [
      { name: 'Arabic', value: 'ar' },
      { name: 'Bulgarian', value: 'bg' },
      { name: 'Catala', value: 'ca' },
      { name: 'Cestina', value: 'cs' },
      { name: 'Dansk', value: 'da' },
      { name: 'Deutsch', value: 'de' },
      { name: 'Greek', value: 'el' },
      { name: 'English', value: 'en' },
      { name: 'English-UK', value: 'en-GB' },
      { name: 'Espanol', value: 'es' },
      { name: 'Farsi', value: 'fa' },
      { name: 'Suomi', value: 'fi' },
      { name: 'Français', value: 'fr' },
      { name: 'Hebrew', value: 'he' },
      { name: 'Hindi', value: 'hi' },
      { name: 'Croatian', value: 'hr' },
      { name: 'Magyar', value: 'hu' },
      { name: 'Italiano', value: 'it' },
      { name: 'Japanese', value: 'ja' },
      { name: 'Korean', value: 'ko' },
      { name: 'Lietuvių', value: 'lt' },
      { name: 'Nederlands', value: 'nl' },
      { name: 'Norsk', value: 'no' },
      { name: 'Polski', value: 'pl' },
      { name: 'Português Brasileiro', value: 'pt-BR' },
      { name: 'Português Europeu', value: 'pt-PT' },
      { name: 'Română', value: 'ro' },
      { name: 'Russian UA', value: 'ru-UA' },
      { name: 'Russian', value: 'ru' },
      { name: 'Slovencina', value: 'sk' },
      { name: 'Serbian', value: 'sr' },
      { name: 'Svenska', value: 'sv' },
      { name: 'Thai', value: 'th' },
      { name: 'Türkçe', value: 'tr' },
      { name: 'Ukrainian', value: 'ua' },
      { name: 'Vietnamese', value: 'vi' },
      { name: 'Chinese', value: 'zh' },
    ],
    [],
  );

  const myView = useMemo<MbscEventcalendarView>(
    () => ({
      calendar: { type: 'week' },
      agenda: { type: 'day' },
    }),
    [],
  );

  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
    setLocaleStr(event.target.value);
  }, []);

  useEffect(() => {
    getJson(
      'https://trial.mobiscroll.com/events/?vers=5',
      (events: MbscCalendarEvent[]) => {
        setEvents(events);
      },
      'jsonp',
    );
  }, []);

  return (
    <Page className="mds-full-height">
      <div className="mds-locale-cont mds-full-height mbsc-flex-col">
        <div className="mbsc-grid">
          <div className="mbsc-row">
            <div className="mbsc-col-sm-8">
              <Dropdown inputStyle="box" label="Locale" labelStyle="stacked" value={localeStr} onChange={handleChange}>
                {languages.map((lang) => (
                  <option key={lang.value} value={lang.value}>
                    {lang.name}
                  </option>
                ))}
              </Dropdown>
            </div>
          </div>
        </div>
        <div className="mds-overflow-hidden mbsc-flex-1-1">
          <Eventcalendar locale={locale[localeStr]} data={myEvents} view={myView} />
        </div>
      </div>
    </Page>
  );
};
export default App;
```

### CSS

```css
.mds-full-height {
  height: 100%;
}

.mds-locale-cont .mbsc-col-sm-8 {
  margin: 0 auto;
}

.mds-overflow-hidden {
  overflow: hidden;
}
```

## 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-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-Calendar Support](https://demo.mobiscroll.com/react/agenda/gregorian-jalali-hijri.md) - Display events in a React agenda view with Gregorian, Jalali, and Hijri calendar system support — configure the calendar system per user locale.