如何修改fullcalendar中time slots格式并自定义时间段列

以下实现适配FullCalendar v5/v6版本，低版本API存在差异需对应调整：

1. 初始化配置时添加自定义逻辑 #

通过slotLabelContent回调控制时间槽显示内容，可自定义字段、排版：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek', // 仅时间网格类视图（周/日视图）显示时间槽
    slotMinTime: '06:00:00', // 自定义当日时间起始点
    slotMaxTime: '23:00:00', // 自定义当日时间结束点
    slotDuration: '00:30:00', // 单个时间槽的时间间隔
    slotLabelInterval: '01:00:00', // 时间标签的展示间隔
    // 核心：自定义时间槽标签内容
    slotLabelContent: function(arg) {
      const timeText = arg.date.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
      // 示例：添加时段标记，可按需替换为班次、时长等自定义内容
      const period = arg.date.getHours() < 12 ? '上午' : arg.date.getHours() < 18 ? '下午' : '晚上';
      return {
        html: `<div class="custom-slot-label">
                <span class="slot-time">${timeText}</span>
                <span class="slot-period">${period}</span>
              </div>`
      };
    },
    // 其余日历配置、事件数据按原有逻辑补充
  });
  calendar.render();
});

2. 补充自定义CSS调整样式 #

覆盖FullCalendar默认样式，实现宽度、行高、视觉效果的自定义：

/* 调整时间槽列总宽度 */
.fc-timegrid-slot-label-container {
  width: 110px !important;
}
/* 自定义时间标签排版样式 */
.custom-slot-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 2px;
}
.slot-time {
  font-size: 14px;
  font-weight: 600;
  color: #222;
}
.slot-period {
  font-size: 11px;
  color: #666;
  margin-top: 3px;
}
/* 调整单条时间槽行高 */
.fc-timegrid-slot {
  height: 45px !important;
}

3. 扩展效果说明 #

如果需要实现多标签、分色等特殊效果，只需要修改slotLabelContent返回的HTML结构，配合CSS样式调整即可；如果要给不同时段的时间槽设置不同的背景样式，可以在渲染完成后遍历时间槽DOM节点，按时间维度匹配添加自定义类名即可。

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