FullCalendar如何设置列标题日期格式？

错误原因 #

columnFormat是FullCalendar v4及更早版本的配置项，在v5+版本中已被废弃移除，因此TypeScript会提示该属性不存在于CalendarOptions类型定义中。

替代方案（v5+版本） #

要实现缩短日期格式并适配移动端显示，可使用dayHeaderFormat（针对月视图/周视图的列头日期）或slotLabelFormat（针对时间网格视图的时间段标签），结合响应式配置区分移动端与桌面端的显示逻辑。

示例代码 #

<FullCalendar
    ref={calendarRef}
    plugins={[
        dayGridPlugin,
        timeGridPlugin,
        listPlugin,
        interactionPlugin,
    ]}
    // 基础的列头日期格式（桌面端）
    dayHeaderFormat={{
        weekday: 'short',
        month: 'numeric',
        day: 'numeric',
    }}
    // 响应式配置：针对移动端调整日期显示
    responsive={[
        {
            breakpoint: 'max-width: 768px',
            options: {
                dayHeaderFormat: {
                    weekday: 'narrow', // 仅显示星期缩写（如周一→一）
                    month: 'numeric',
                    day: 'numeric',
                }
            }
        }
    ]}
    // 保留原有其他配置
    initialView="dayGridMonth"
    eventDrop={(dropInfo) => {}}
/>

格式参数说明 #

• weekday: 'short'：显示短星期名（如Mon/周一）
• weekday: 'narrow'：显示极短星期名（如M/一）
• month: 'numeric'：显示数字月份（如10）
• day: 'numeric'：显示数字日期（如5）

如果使用时间网格视图（timeGridWeek/timeGridDay），可通过slotLabelFormat优化时间段显示：

slotLabelFormat={{
    hour: 'numeric',
    minute: '2-digit',
    omitZeroMinute: true, // 省略分钟为0的显示（如9:00→9）
    meridiem: 'short' // 可选：显示AM/PM标识
}}

内容的提问来源于stack exchange，提问作者János