如何自定义FullCalendar时段？含时段名称、高度及列格式等需求

你已经把自定义时段（早餐/午餐等资源）和增删功能做得差不多了，剩下的两个需求其实都可以通过FullCalendar的配置项或者简单CSS来实现，我直接结合你现有代码给你调整方案：

一、修改ColumnHeader的日期格式 #

在你的Week视图配置里，添加columnHeaderFormat属性，用moment.js的格式字符串定义你想要的日期显示样式。比如想显示成「周一 4/8」这种简洁格式，就用"ddd M/D"；如果需要更详细的格式，参考moment的格式规则即可。

修改后的views配置片段：

views: {
  Week: {
    type: 'timeline',
    duration: { days: 7 }, // 注意这里你之前写的`Days`要改成小写`days`，否则配置不生效
    slotLabelInterval: { hours: 24},
    slotDuration: { hours: 24},
    columnHeaderFormat: "ddd, M/D" // 自定义日期格式
  }
},

二、设置行列的固定大小 #

1. 固定左侧资源列（Meal列）的宽度 #

可以直接用FullCalendar提供的resourceLabelWidth配置项，在主配置里添加：

resourceLabelWidth: 120, // 自定义宽度，单位px

如果需要更灵活的样式控制，也可以用CSS：

.fc-resource-cell {
  min-width: 120px;
  max-width: 120px;
}

2. 固定日期列的宽度 #

在Week视图配置里添加slotWidth属性：

views: {
  Week: {
    type: 'timeline',
    duration: { days: 7 },
    slotLabelInterval: { hours: 24},
    slotDuration: { hours: 24},
    columnHeaderFormat: "ddd, M/D",
    slotWidth: 100 // 每个日期列的固定宽度，单位px
  }
},

3. 固定资源行的高度 #

用FullCalendar的resourceRowHeight配置项，在主配置里添加：

resourceRowHeight: 80, // 每行的固定高度，单位px

同样也可以用CSS控制：

.fc-resource-row {
  min-height: 80px;
  max-height: 80px;
}

整合后的完整代码示例 #

这里把所有修改整合到你的现有代码中，你可以直接替换使用：

JavaScript部分 #

var today = moment();
$('#calendar').fullCalendar({
  droppable: true,
  defaultView: 'Week',
  header: false,
  defaultDate: today,
  navLinks: false,
  editable: true,
  eventLimit: true,
  schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
  eventRender: function (event, element) {
    element.find(".fc-event-title").remove();
    element.find(".fc-event-time").remove();
    var new_description = '#';
    element.append(new_description);
  },
  now: today,
  footer: {
    left: 'promptResource',
    center: '',
    right: ''
  },
  customButtons: {
    promptResource: {
      text: '+ add course',
      click: function() {
        var title = prompt('Course name');
        if (title) {
          $('#calendar').fullCalendar(
            'addResource',
            { title: title },
            true
          );
        }
      }
    }
  },
  views: {
    Week: {
      type: 'timeline',
      duration: { days: 7 }, // 修正为小写days
      slotLabelInterval: { hours: 24},
      slotDuration: { hours: 24},
      columnHeaderFormat: "ddd, M/D", // 自定义日期格式
      slotWidth: 100 // 固定日期列宽度
    }
  },
  resourceLabelText: 'Meal',
  resourceLabelWidth: 120, // 固定资源列宽度
  resourceRowHeight: 80, // 固定资源行高度
  resourceRender: function(resource, cellEls) {
    cellEls.on('click', function() {
      if (confirm('Are you sure you want to delete ' + resource.title + '?')) {
        $('#calendar').fullCalendar('removeResource', resource);
      }
    });
  },
  resources: [
    { id: 'a', title: 'Breakfast' , eventColor: 'red'},
    { id: 'b', title: 'Lunch', eventColor: 'green' },
    { id: 'c', title: 'Dinner', eventColor: 'orange' },
    { id: 'd', title: 'Other', eventColor: 'grey'},
  ],
  events: [
    { id: '1', resourceId: 'b', start: today, end: today, title: 'event 1' },
    { id: '2', resourceId: 'c', start: '2018-04-07T05:00:00', end: '2018-04-07T22:00:00', title: 'event 2' },
    { id: '3', resourceId: 'd', start: '2018-04-06', end: '2018-04-08', title: 'event 3' },
    { id: '4', resourceId: 'e', start: '2018-04-07T03:00:00', end: '2018-04-07T08:00:00', title: 'event 4' },
    { id: '5', resourceId: 'f', start: '2018-04-07T00:30:00', end: '2018-04-07T02:30:00', title: 'event 5' }
  ]
});

HTML部分（可选添加CSS控制） #

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" data-print="true" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.css" />
<!-- 可选：如果用CSS控制行列尺寸，添加这个style标签 -->
<style>
/* .fc-resource-cell {
  min-width: 120px;
}
.fc-resource-row {
  min-height: 80px;
} */
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar-scheduler/1.9.4/scheduler.min.js"></script>
<div id="calendar"></div>

这样调整后，你的日历就能同时满足自定义日期格式、行列固定尺寸的需求，之前的自定义时段增删功能也不受影响。

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