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