全日历区域设置未更改 v5 中的标题栏

Question

我在更改全日历 headerToolbar 的区域设置时遇到问题。

奇怪的是它适用于月份和日期名称，但不适用于标题。

代码如下所示：

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() 返回浏览器语言，在我的情况下它应该（并且确实）返回 no-NB。

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

为什么它没有改变 headerToolbar 的本地化？

Answer 1

当您谈论标题工具栏的本地化时，我假设您正在具体谈论按钮中的视图名称，因为标题的日期部分显然已经本地化了。

为什么在您的情况下没有改变的答案只是因为 fullCalendar 的区域设置文件不包含

no

或

no-NB

（挪威）的条目。因此，没有文本 fullCalendar 可以用来替换视图和其他按钮的名称。

在撰写本文时，您可以在 https://cdn.jsdelivr.net/npm/[email protected]/locales-all.js 查看最新版本，并看到没有该区域代码的条目.

但是有一个

nb

的条目，我相信它是挪威语博克马尔语。所以如果合适的话你可以使用它。

一种替代解决方案是修改区域设置文件，以添加您自己的日历中要支持的语言代码条目。 （如果您采用这种方法，您也可以将您的贡献提交给 fullCalendar 项目，看看他们是否会接受它到下一个版本默认提供的文件中。）

另一种替代解决方案是为每个视图创建 自定义视图设置，您可以在其中定义自己的按钮文本，甚至对于内置视图也是如此。

（P.S. 在您的示例中日期仍然本地化的原因是因为这实际上是由浏览器 JavaScript 引擎内置的 JS Date 库完成的。FullCalendar 仅使用其结果。其区域设置（如果可用）可能会覆盖某些方面演示文稿的内容，但否则它将仅使用浏览器默认生成的任何内容。）

Answer 2

'use client';
import FullCalendar from '@fullcalendar/react';
import { CalendarOptions } from '@fullcalendar/core/index.js';

// Import the locale from package
import locale from '@fullcalendar/core/locales/ru';

export const Calendar = () => {
  const options: CalendarOptions = {
    events: [
      { title: 'event 1', date: new Date() },
      { title: 'event 2', date: new Date() },
    ],
    locale,
  };

  return <FullCalendar {...options} />;
};

区域设置导入促成了交易。