---
title: locale
---

The `locale` and `locales` options allow you to localize certain aspects of the calendar:

- the text in buttons, as defined by [headerToolbar](headerToolbar)
- text that contains month or day-of-week strings
- date formatting, such as [eventTimeFormat](eventTimeFormat)
- [weekNumberCalculation](weekNumberCalculation)
- [firstDay](firstDay)


## Loading Locales for an ES6 build system

If you are using [an ES6 build system](initialize-es6) and want to load a specific locale, do something like this:

```js
import { Calendar } from 'fullcalendar';
import esLocale from 'fullcalendar/locales/es';
...
let calendar = new Calendar(calendarEl, {
  locale: esLocale
});
...
```

If you want to load multiple specific locales with the ability to switch between them after pageload, do something like this:

```js
import { Calendar } from 'fullcalendar';
import esLocale from 'fullcalendar/locales/es';
import frLocale from 'fullcalendar/locales/fr';
...
let calendar = new Calendar(calendarEl, {
  locales: [ esLocale, frLocale ],
  locale: 'fr' // the initial locale. if not specified, uses the first one
});
...
calendar.setOption('locale', 'es');
```

If you want to load ALL locales have the ability to switch between them after pageload, do something like this:

```js
import { Calendar } from 'fullcalendar';
import allLocales from 'fullcalendar/locales-all';
...
let calendar = new Calendar(calendarEl, {
  locales: allLocales,
  locale: 'fr' // the initial locale
});
...
calendar.setOption('locale', 'pt-br');
```


## Loading Locales with Script Tags and Browser Globals

If you are using [script tags and browser globals](initialize-globals) and want to load a specific locale, do something like this:

```html
<script src='<fullcalendar-dist>/all.global.js'></script>
<script src='<fullcalendar-dist>/themes/monarch/global.js'></script>
<link href='<fullcalendar-dist>/skeleton.css' rel='stylesheet' />
<link href='<fullcalendar-dist>/themes/monarch/theme.css' rel='stylesheet' />
<link href='<fullcalendar-dist>/themes/monarch/palettes/purple.css' rel='stylesheet' />

<script src='<fullcalendar-dist>/locales/es.global.js'></script>
<script>
...
var calendar = new FullCalendar.Calendar(calendarEl, {
  locale: 'es'
});
...
</script>
```

If you want to load ALL locales have the ability to switch between them after pageload, do something like this:

```html
<script src='<fullcalendar-dist>/all.global.js'></script>
<script src='<fullcalendar-dist>/themes/monarch/global.js'></script>
<link href='<fullcalendar-dist>/skeleton.css' rel='stylesheet' />
<link href='<fullcalendar-dist>/themes/monarch/theme.css' rel='stylesheet' />
<link href='<fullcalendar-dist>/themes/monarch/palettes/purple.css' rel='stylesheet' />

<script src='<fullcalendar-dist>/locales-all.global.js'></script>
<script>
...
var calendar = new FullCalendar.Calendar(calendarEl, {
  locale: 'es'
});
...
calendar.setOption('locale', 'fr');
</script>
```

For more information, [view a live demo](locale-demo).


## Locale Object Shape

When creating a custom locale, the object looks like this:

```js
{
  code: 'es',

  // button text
  prevText: 'Ant',
  nextText: 'Sig',
  todayText: 'Hoy',
  yearText: 'Año',
  monthText: 'Mes',
  weekText: 'Semana',
  dayText: 'Día',
  listText: 'Agenda',

  // button hints (strings with $0 placeholder, or functions)
  prevHint: '$0 antes',
  nextHint: '$0 siguiente',
  todayHint(unitText, unitId) {
    // unitId is a canonical string like 'day'/'week'/'month', easier to branch on than the translated unitText
    return (unitId === 'day') ? 'Hoy' :
      ((unitId === 'week') ? 'Esta' : 'Este') + ' ' + unitText.toLocaleLowerCase()
  }
}
```

The hint values accept a `$0` placeholder or a function. [Read more about hints](hints).