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