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