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