locale

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

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

Loading Locales for an ES6 build system

If you are using an ES6 build system and want to load a specific locale, do something like this:

import { Calendar } from '@fullcalendar/core';
import esLocale from '@fullcalendar/core/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:

import { Calendar } from '@fullcalendar/core';
import esLocale from '@fullcalendar/core/locales/es';
import frLocale from '@fullcalendar/core/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:

import { Calendar } from '@fullcalendar/core';
import allLocales from '@fullcalendar/core/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 and want to load a specific locale, do something like this:

<script src='fullcalendar/core/index.global.js'></script>
<script src='fullcalendar/core/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:

<script src='fullcalendar/core/index.global.js'></script>
<script src='fullcalendar/core/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 Object Shape

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

{
  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.