FullCalendar中自定义DayGrid标题格式的实践指南

需求背景

在使用FullCalendar进行日程管理界面开发时，开发者经常需要根据项目需求调整日历视图的显示样式。其中DayGrid视图默认的标题格式为"星期 月/日"（如"Mon 9/16"），但部分场景下需要更简洁的显示方式，例如仅保留"星期 日"（如"Mon 16"）。

技术实现方案

1. 使用titleFormat配置项

FullCalendar提供了titleFormat配置参数，允许开发者完全自定义标题的显示格式。该参数支持多种时间格式字符串：

calendar = new FullCalendar.Calendar(calendarEl, {
  initialView: 'dayGridMonth',
  titleFormat: {
    day: 'ddd D' // 三字母星期缩写 + 日期数字
  }
});

2. 格式字符串说明

• ddd：表示缩写的星期名称（如Mon/Tue）
• D：表示月份中的日期（1-31）
• 其他常用格式：
  • dddd：完整星期名称
  • M：月份数字
  • MMM：缩写月份名称

3. 多视图差异化配置

对于包含多种视图的日历，可以针对不同视图设置不同的标题格式：

calendar = new FullCalendar.Calendar(calendarEl, {
  views: {
    dayGridMonth: {
      titleFormat: { day: 'ddd D' }
    },
    timeGridWeek: {
      titleFormat: { day: 'dddd D' }
    }
  }
});

实现注意事项

1. 响应式设计考虑：在移动端等小尺寸设备上，过长的日期格式可能影响显示效果，建议根据屏幕尺寸动态调整格式

2. 本地化适配：如果项目需要支持多语言，需配合locale配置项使用，确保星期名称能正确本地化

3. 样式覆盖：修改标题格式后可能需要相应调整CSS样式以保证UI协调性

扩展应用

除了DayGrid视图，该技巧同样适用于FullCalendar的其他视图类型。开发者还可以结合moment.js或原生Date对象的格式化能力，实现更复杂的自定义格式需求。

通过灵活运用FullCalendar的格式化配置，开发者可以轻松实现符合产品设计要求的日历显示效果，提升用户体验的同时保持代码的简洁性。