FullCalendar Scheduler列头格式设置无效问题求助

我帮你排查了下代码里的问题，主要有几个关键点导致列头格式设置没生效，下面给你逐一说明并附上修正后的代码：

问题分析 #

1. 版本不匹配：你引入的Scheduler CSS是4.0.0-alpha.2版本，但JS用的是1.9.4，和FullCalendar 3.9.0不兼容，这会导致部分配置失效。
2. 配置项错误：在FullCalendar 3.x及对应的Scheduler 1.x版本中，时间线视图的列头格式应该用columnFormat配置项，且需要放在每个具体的view配置内部，而不是全局的columnHeaderFormat（这个是FullCalendar 4+才新增的配置）。
3. 格式字符串顺序：你想要的格式是'D M dddd'（日 月 星期全称），需要确保格式符正确对应moment.js的规则。

修正后的代码 #

HTML部分（统一版本） #

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.js"></script>
<div id="calendar"></div>

JS部分（调整配置位置） #

$(document).ready(function() {
  $('#calendar').fullCalendar({
    header: {
      right: 'today',
      left: 'timelineSevenDay,timelineFifteenDay,timelineThirtyDay'
    },
    defaultView: 'timelineSevenDay',
    views: {
      timelineSevenDay: {
        type: 'timeline',
        duration: { days: 7 },
        slotDuration: '24:00',
        // 将列头格式放在view内部
        columnFormat: 'D M dddd'
      },
      timelineFifteenDay: {
        type: 'timeline',
        duration: { days: 15 },
        slotDuration: '24:00',
        columnFormat: 'D M dddd'
      },
      timelineThirtyDay: {
        buttonText: '30 days',
        type: 'timeline',
        duration: { days: 30 },
        slotDuration: '24:00',
        columnFormat: 'D M dddd'
      }
    },
    resourceLabelText: 'Room',
    resourceGroupField: 'type',
    resources: [
      { id: 'a', type: 'Standard Room', title: '101' },
      { id: 'b', type: 'Standard Room', title: '102' },
      { id: 'c', type: 'Standard Room', title: '103' },
      { id: 'd', type: 'Standard Room', title: '104' },
      { id: 'e', type: 'Standard Room', title: '105' },
      { id: 'f', type: 'Deluxe Double Room', title: '106' },
      { id: 'g', type: 'Deluxe Double Room', title: '107' },
      { id: 'h', type: 'Deluxe Double Room', title: '108' },
      { id: 'i', type: 'Deluxe Double Room', title: '109' },
      { id: 'j', type: 'Deluxe Double Room', title: '110' },
      { id: 'k', type: 'King Room With Jacuzzi', title: '201' },
      { id: 'l', type: 'King Room With Jacuzzi', title: '202' },
      { id: 'm', type: 'King Room With Jacuzzi', title: '203' },
      { id: 'n', type: 'King Room With Jacuzzi', title: '204' }
    ]
  });
});

关键修改说明 #

• 统一了Scheduler的CSS和JS版本为1.9.4，和FullCalendar 3.9.0保持兼容；
• 把columnFormat配置移到了每个timeline视图的内部配置中，这是FullCalendar 3.x版本中时间线视图生效的正确位置；
• 使用了你需要的'D M dddd'格式字符串，对应moment.js的日期格式规则：
  • D：月份中的第几天（1-31）
  • M：月份数字（1-12）
  • dddd：星期全称（比如Monday、Tuesday）

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