Fullcalendar 语言环境不更改 v5 中的标题栏

Posted

技术标签:

【中文标题】Fullcalendar 语言环境不更改 v5 中的标题栏【英文标题】:Fullcalendar locale not changing header bar in v5 【发布时间】:2022-01-21 23:24:54 【问题描述】:

我在更改完整日历的 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的本地化?

【问题讨论】:

仅供参考 locale 不是 headerToolbar 中的有效选项 - 请参阅 fullcalendar.io/docs/headerToolbar 了解有效选项 【参考方案1】:

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

在您的情况下为什么没有改变的答案仅仅是因为 fullCalendar 的语言环境文件不包含 nono-NB(挪威)的条目。因此没有文本 fullCalendar 可以用来替换视图和其他按钮的名称。

在撰写本文时,您可以在https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/locales-all.js 查看最新版本,并看到该区域代码没有条目。

不过,nb 有一个条目,我相信它是挪威博克马尔语。因此,如果合适,您可以使用它。

另一种解决方案是修改语言环境文件,为您希望在日历中支持的语言代码添加您自己的条目。 (如果你采用这种方法,你也可以将你的贡献提交给 fullCalendar 项目,看看他们是否会接受它到下一个版本默认提供的文件中。)

另一种替代解决方案是为每个视图创建custom view settings,您可以在其中定义自己的按钮文本,即使是内置视图。

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

【讨论】:

以上是关于Fullcalendar 语言环境不更改 v5 中的标题栏的主要内容,如果未能解决你的问题,请参考以下文章

FullCalendar v5 通过切换按钮显示/隐藏周末

在 Fullcalendar v5 中使用 css-class 切换事件颜色

编辑事件渲染()后的fullcalendar v5不刷新

Fullcalendar v5 仅呈现一个事件提示

如何根据 FullCalendar V5 上的选择值过滤事件?

Fullcalendar:更改特定日期的颜色