Event Timeline - Localization

Translate UI labels and date formats to support a global audience.

The default locale of MUI X is English (United States).

Translation keys

Use the localeText prop to pass in your own text and translations. You can find all supported translation keys in the source on GitHub. The demo below customizes the resource column header and loading text.

Team member

Locale text

Use the theme to configure the locale text:

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';
import { frFR } from '@mui/x-scheduler/locales';
// Or import { frFR } from '@mui/x-scheduler-premium/locales';

const theme = createTheme(
  {
    palette: {
      primary: { main: '#1976d2' },
    },
  },
  frFR,
);

<ThemeProvider theme={theme}>
  <EventTimelinePremium />
</ThemeProvider>;

The createTheme() function accepts any number of arguments. If you're already using the translations of the core components, you can add frFR as a new argument.

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';
import { frFR } from '@mui/x-scheduler/locales';
import { frFR as pickersFrFR } from '@mui/x-date-pickers/locales';
import { frFR as coreFrFR } from '@mui/material/locale';

const theme = createTheme(
  {
    palette: {
      primary: { main: '#1976d2' },
    },
  },
  frFR, // x-scheduler translations
  pickersFrFR, // x-date-pickers translations
  coreFrFR, // core translations
);

<ThemeProvider theme={theme}>
  <EventTimelinePremium />
</ThemeProvider>;

To pass language translations directly to the Event Timeline without using createTheme() and ThemeProvider, load them from @mui/x-scheduler/locales.

import { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';
import { frFR } from '@mui/x-scheduler/locales';

<EventTimelinePremium
  localeText={frFR.components.MuiEventTimeline.defaultProps.localeText}
/>;

Titre de la ressource

Date locale

The localeText prop only translates the UI labels (button text, menu items, etc.). To also translate formatted dates (day names, month names, and week start day), pass a date-fns locale object.

Use the createDateLocaleTheme helper to set the date locale globally via the theme, alongside localeText translations:

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { fr } from 'date-fns/locale/fr';
import { frFR, createDateLocaleTheme } from '@mui/x-scheduler/locales';
import { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';

const theme = createTheme(
  {
    palette: {
      primary: { main: '#1976d2' },
    },
  },
  frFR,
  createDateLocaleTheme(fr),
);

<ThemeProvider theme={theme}>
  <EventTimelinePremium />
</ThemeProvider>;

You can also pass the dateLocale prop directly to the component to override the theme value or avoid using a theme:

import { fr } from 'date-fns/locale/fr';
import { EventTimelinePremium } from '@mui/x-scheduler-premium/event-timeline-premium';

<EventTimelinePremium dateLocale={fr} />;

Titre de la ressource

Supported locales

You can find the source on GitHub.

Locale	BCP 47 language tag	Import name	Completion	Source file
Arabic (Sudan)	ar-SD	`arSD`	0/107	Edit
Armenian	hy-AM	`hyAM`	0/107	Edit
Bangla	bn-BD	`bnBD`	0/107	Edit
Belarusian	be-BY	`beBY`	0/107	Edit
Bulgarian	bg-BG	`bgBG`	0/107	Edit
Catalan	ca-ES	`caES`	0/107	Edit
Chinese (Hong Kong)	zh-HK	`zhHK`	0/107	Edit
Chinese (Simplified)	zh-CN	`zhCN`	0/107	Edit
Chinese (Taiwan)	zh-TW	`zhTW`	0/107	Edit
Croatian	hr-HR	`hrHR`	0/107	Edit
Czech	cs-CZ	`csCZ`	0/107	Edit
Danish	da-DK	`daDK`	0/107	Edit
Dutch	nl-NL	`nlNL`	0/107	Edit
Finnish	fi-FI	`fiFI`	0/107	Edit
French	fr-FR	`frFR`	88/107	Edit
German	de-DE	`deDE`	88/107	Edit
Greek	el-GR	`elGR`	0/107	Edit
Hebrew	he-IL	`heIL`	Done 🎉	Edit
Hungarian	hu-HU	`huHU`	0/107	Edit
Icelandic	is-IS	`isIS`	0/107	Edit
Indonesian	id-ID	`idID`	0/107	Edit
Italian	it-IT	`itIT`	88/107	Edit
Japanese	ja-JP	`jaJP`	0/107	Edit
Korean	ko-KR	`koKR`	0/107	Edit
Norwegian (Bokmål)	nb-NO	`nbNO`	88/107	Edit
Norwegian (Nynorsk)	nn-NO	`nnNO`	0/107	Edit
Persian	fa-IR	`faIR`	0/107	Edit
Polish	pl-PL	`plPL`	95/107	Edit
Portuguese	pt-PT	`ptPT`	88/107	Edit
Portuguese (Brazil)	pt-BR	`ptBR`	88/107	Edit
Romanian	ro-RO	`roRO`	88/107	Edit
Russian	ru-RU	`ruRU`	Done 🎉	Edit
Slovak	sk-SK	`skSK`	0/107	Edit
Spanish	es-ES	`esES`	89/107	Edit
Swedish	sv-SE	`svSE`	0/107	Edit
Thai	th-TH	`thTH`	0/107	Edit
Turkish	tr-TR	`trTR`	0/107	Edit
Ukrainian	uk-UA	`ukUA`	0/107	Edit
Urdu (Pakistan)	ur-PK	`urPK`	0/107	Edit
Vietnamese	vi-VN	`viVN`	0/107	Edit

To create your own translation or customize the English text, copy this file to your project, make any needed changes, and import the locale from there. These translations follow the Localization strategy of the whole library.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<EventTimelinePremium />