Event Calendar - 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 labels of the view switcher buttons.
Alice's Birthday
Morning Run
Team Meeting
Gym Class
Yoga
1-on-1 with Sarah
Code Review
4th of July BBQ
Locale text
Use the theme to configure the locale text:
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { EventCalendar } from '@mui/x-scheduler/event-calendar';
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}>
<EventCalendar />
</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.
The same import works for Event Calendar Premium, which extends Event Calendar.
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { EventCalendar } from '@mui/x-scheduler/event-calendar';
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}>
<EventCalendar />
</ThemeProvider>;
To pass language translations directly to the Event Calendar without using createTheme() and ThemeProvider, load them from @mui/x-scheduler/locales.
import { EventCalendar } from '@mui/x-scheduler/event-calendar';
import { frFR } from '@mui/x-scheduler/locales';
<EventCalendar
localeText={frFR.components.MuiEventCalendar.defaultProps.localeText}
/>;
Alice's Birthday
Morning Run
Team Meeting
Gym Class
Yoga
1-on-1 with Sarah
Code Review
4th of July BBQ
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 { EventCalendar } from '@mui/x-scheduler/event-calendar';
const theme = createTheme(
{
palette: {
primary: { main: '#1976d2' },
},
},
frFR,
createDateLocaleTheme(fr),
);
<ThemeProvider theme={theme}>
<EventCalendar />
</ThemeProvider>;
You can 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 { EventCalendar } from '@mui/x-scheduler/event-calendar';
<EventCalendar dateLocale={fr} />;
Alice's Birthday
Morning Run
Team Meeting
Gym Class
Yoga
1-on-1 with Sarah
Code Review
4th of July BBQ
Long Run
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 Material UI's localization strategy.
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.