如何在fullCalendar中创建当日9点至次日9点的24小时时间段

要实现从当日9点到次日9点的24小时时间轴显示，核心是通过FullCalendar的时间范围配置项调整，以下是具体实现方案：

关键配置说明 #

• slotMinTime：设置时间轴起始时间，对应当日上午9点，值为'09:00:00'
• slotMaxTime：设置时间轴结束时间，由于要覆盖到次日9点，直接使用'33:00:00'（24小时+9小时），FullCalendar会自动将超过24的部分解析为次日时间
• allDaySlot：建议设为false，隐藏默认的全天事件槽，避免干扰自定义时间轴的显示

完整代码示例 #

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek', // 也可选择timeGridDay视图
    slotMinTime: '09:00:00',
    slotMaxTime: '33:00:00',
    allDaySlot: false,
    slotDuration: '00:30:00', // 可选，设置每个时间槽的间隔为30分钟
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'timeGridWeek,timeGridDay'
    },
    // 示例跨日事件
    events: [
      {
        title: '夜间值班',
        start: '2024-05-20T22:00:00',
        end: '2024-05-21T08:00:00'
      }
    ]
  });
  calendar.render();
});

注意事项 #

• 使用timeGridDay视图时，该视图会将"当日9点到次日9点"作为一个连续时间轴展示，而非自然日的0点到24点
• 跨日事件的start和end属性可正常按ISO格式设置，FullCalendar会在自定义时间轴内正确渲染这些事件
• 如果需要限制用户仅在该时间段内创建/编辑事件，可配合selectConstraint配置项，值设为{start: '09:00', end: '33:00'}

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