Search code examples
javascriptfullcalendarfullcalendar-6

Setting Fullcalendar locale without CDN

I would like to use Fullcalendar without CDN (i.e. offline) and set a locale.

On my page I'm loading Fullcalendar as follows (on my Django app), after downloading and setting up per https://fullcalendar.io/docs/initialize-globals:

<script src="{% static 'fullcalendar/fullcalendar-6.1.15/index.global.min.js' %}"></script>

All OK - I can see my <div id="calendar"></div> shows a calendar 👍.

Now I'd like to set the default locale and I seem to be unable to do so. First, I'm not sure where to get the locale file, but found it through https://unpkg.com/browse/@fullcalendar/[email protected]/locales/fr.js. Not sure if that's the right location as it's an unrelated web site (the version does match)?

I'm trying to set it up per https://fullcalendar.io/docs/locale by adding:

<script src="{% static 'fullcalendar/fullcalendar-6.1.15/locales/fr.js' %}"></script>

And of course setting the locale on the initialization:

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        locale: 'fr',
    });
    calendar.render();
});

The calendar still shows up and has the days of the week translated in the new language (which was not the case before), but the top strings such as the button 'today' or the month names.

I get following error on the browser JS console:

Uncaught SyntaxError: Unexpected token 'export' (at fr.js:24:1)

So I assume it's not being loaded properly. None of the strings in the fr.js file are showing up.

What's the suggested way to use Fullcalendar with a locale, without the need to change the locale file itself (as this will cause trouble with updates)?

Solution

  • You seem to be using an environment which doesn't support modules. Therefore you need the "global" version of the locale file, which exposes the data a different way.

    You can get it from https://unpkg.com/browse/@fullcalendar/[email protected]/locales/fr.global.min.js

    The full list of locale files for 6.1.15 can be browsed here: https://unpkg.com/browse/@fullcalendar/[email protected]/locales/

    Or if you prefer to get it from one of the CDNs that fullCalendar mentions on its site (not that there's anything wrong with Unpkg, it's a well-known CDN), you can get the same file from https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/locales/fr.global.min.js (and all locale files for 6.1.15 are listed at https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/locales/)