Change the language of the Fullcalendar React component

Viewed 1813

I cannot find on the fullcalendar documentation how to set the locale for the React component (https://fullcalendar.io/docs/react).

This is how I'm using the component:

import FullCalendar from '@fullcalendar/react' // must go before plugins
import dayGridPlugin from '@fullcalendar/daygrid' // a plugin!

export default function Calendar(props){
    
    return (
        <Box>
            <FullCalendar
            plugins={[ dayGridPlugin ]}
            initialView="dayGridMonth"
            />
        </Box>
    );

}

How can I set the language to Spanish?

1 Answers

The locale can be set on the Fullcalendar React component like this:

  1. Run: yarn add @fullcalendar/core

  2. Import the locale: import esLocale from '@fullcalendar/core/locales/es';

  3. Pass the locale as a prop to the component:

     <FullCalendar locale={esLocale} plugins={[ dayGridPlugin ]} initialView="dayGridMonth" />
    
Related