如何配置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
相关产品推荐
相关产品推荐

