FullCalendar 3.4月视图无法显示日期名称的解决求助

我帮你排查下这个问题——FullCalendar 3.x的API和后续v4+版本有不少差异，你遇到的核心问题就是用错了配置项。

问题根源 #

你当前配置里用的columnHeaderFormat是FullCalendar v4及以上版本才支持的属性，而在3.4这个版本中，月视图的列头日期格式需要用columnFormat来配置。

修改后的配置代码 #

把你原来的views部分改成下面这样，就能让月视图显示日期名称了：

$('#calendar').fullCalendar({
    defaultView: 'month',
    weekNumbers: true,
    selectable: true,
    selectHelper: true,
    selectOverlap: false,
    timeFormat: 'H:mm',
    firstDay: 1,
    // 修改这里：把columnHeaderFormat换成columnFormat
    views: {
        month: {
            columnFormat: 'ddd' // 显示短日期名称，比如 Mon/Tue/周一/周二
        }
    },
    header: {
        right: 'prev,next today',
        left: 'title',
        center: 'month,agendaWeek,agendaDay'
    }
});

额外注意事项 #

• 如果需要显示中文的星期名称（比如“周一”“周二”），你需要引入FullCalendar的中文本地化文件（fullcalendar.locale.zh-cn.js），并在配置中添加locale: 'zh-cn'。
• 如果你想全局统一所有视图的列头格式，也可以直接在顶层配置columnFormat，不用嵌套在views里，比如：

  columnFormat: {
      month: 'ddd',
      week: 'ddd M/d',
      day: 'dddd M/d'
  }
  

修改后刷新页面，月视图的列头应该就能正常显示日期名称了。

内容的提问来源于stack exchange，提问作者Oleg