You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何配置FullCalendar标题栏仅显示当前日期?

自定义FullCalendar标题栏内容实现方案

当然可以自定义标题栏内容,针对你的需求(仅显示当前日期),可以通过FullCalendar的titleContent配置项实现(适用于v5及以上版本),具体修改后的配置代码如下:

themeSystem: 'standard',
initialView: 'listWeek',
headerToolbar: {
    start: 'prevYear,prev,today',
    center: 'title',
    end: 'timeGridWeek,listWeek,next,nextYear',
},
titleContent: (arg) => {
    // 格式化当前日期为中文常用格式,比如「2024年5月20日」
    const today = new Date();
    return today.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    });
    // 若需显示视图对应的起始日期而非当天,可替换为:
    // return arg.view.currentStart.toLocaleDateString('zh-CN', {year: 'numeric', month: 'long', day: 'numeric'});
}

说明:

  • titleContent是FullCalendar提供的标题自定义回调函数,渲染标题栏时会触发该函数,返回的内容将替代默认的标题文本。
  • 通过toLocaleDateString可灵活调整日期格式,适配不同语言和显示需求。

内容的提问来源于stack exchange,提问作者slvhxia

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.16 20:40:30