Fullcalendar 语言环境不会更改 v5 中的 header 栏

Question

I'm having issues changing the locale of the headerToolbar of the fullcalendar.

What's weird is that it works on month and day names, just not the header.

Code looks like this:

let calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
        locale: getLanguage(),
        left: 'prev,next',
        center: 'title',
        right: 'timeGridWeek,dayGridMonth,listWeek',
    },
    initialView: 'timeGridWeek',
    weekNumbers: true,
    weekText: "",
    weekends: false,
    firstDay: 1,
    slotMinTime: "07:00:00",
    slotMaxTime: "18:00:00",
    eventTimeFormat: {
        hour: '2-digit',
        minute: '2-digit',
        hour12: false, 
    },
    locale: getLanguage(),
    eventDisplay: "block",
    eventTextColor: "#fff"
});

getLanguage() returns the browsers language, in my case it should (and do) return no-NB.

function getLanguage() {
    let result = window.localStorage[LANGUAGE];
    return result ? result : navigator.language || navigator.userLanguage || 'no';
}

How come it doesn't change the localization of the headerToolbar?

Answer 1

When you talk about the localisation of the header toolbar, I assume you're talking specifically about the names of the views in the buttons, because the date part of the header has clearly been localised already.

The answer why that doesn't change in your case is simply because fullCalendar's locale file doesn't contain an entry for no or no-NB (Norway). Therefore there is no text fullCalendar can use to replace the names of the views and other buttons.

At the time of writing, you can view the latest version athttps://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/locales-all.js and see there is no entry for that region code.

There is, however an entry for nb , which I believe is Norwegian Bokmål. So you could use that, if it's appropriate.

One alternative solution is to modify the locales file to add your own entry for the language code(s) you want to support in your calendar. (If you take this approach, you could also submit your contribution to the fullCalendar project as well, to see if they would accept it into the files supplied by default with the next release.)

Another alternative solution is to create custom view settings for each view, where you can define your own button text, even for the built-in views.

(PS The reason the dates are still localised in your example is because that's actually done by the JS Date library built in to your browser's JavaScript engine. FullCalendar merely uses the results of that. Its locale settings, when available, may override certain aspects of the presentation, but otherwise it will just use whatever the browser produces by default.)