如何在单个FullCalendar中设置双时间段并匹配45分钟slotDuration？

核心实现思路 #

要在单个实例中实现10:30-12:00、14:30-19:00两个独立时段（配合45分钟的slot间隔），需要同时完成三个关键操作：隐藏中间无效时段、限制操作仅在有效时段内、修正下午起始刻度的偏差。

具体步骤与代码示例 #

1. 基础日历配置 #

先设定整体时间范围和slot间隔：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridDay', // 可根据需求切换为timeGridWeek
    slotMinTime: '10:30:00',
    slotMaxTime: '19:00:00',
    slotDuration: '00:45:00',
    // 后续配置项将添加到这里
  });
  calendar.render();
});

2. 隐藏中间无效时段（12:00-14:30） #

通过CSS隐藏对应时段的行，再用回调跳过无效时段的标签：

/* 隐藏12:00到14:15之间的所有slot行 */
.fc-timegrid-slot[data-time="12:00:00"],
.fc-timegrid-slot[data-time="12:45:00"],
.fc-timegrid-slot[data-time="13:30:00"],
.fc-timegrid-slot[data-time="14:15:00"] {
  display: none;
}

在日历配置中添加标签过滤回调：

slotLabelContent: function(info) {
  const excludedTimes = ['12:00', '12:45', '13:30', '14:15'];
  if (excludedTimes.includes(info.timeText)) {
    return { html: '' };
  }
  return { html: info.timeText };
}

3. 限制操作与事件仅在有效时段内 #

限制选择操作

用selectAllow回调拦截无效时段的选择：

selectAllow: function(info) {
  const start = info.start;
  const dayStart = new Date(start.setHours(0,0,0,0));
  
  // 定义当天的有效时段范围
  const amRange = {
    start: new Date(dayStart.setHours(10,30,0)),
    end: new Date(dayStart.setHours(12,0,0))
  };
  const pmRange = {
    start: new Date(dayStart.setHours(14,30,0)),
    end: new Date(dayStart.setHours(19,0,0))
  };
  
  // 校验选择时段是否完全落在某一个有效区间内
  return (info.start >= amRange.start && info.end <= amRange.end) || 
         (info.start >= pmRange.start && info.end <= pmRange.end);
}

限制事件显示与添加

用eventAllow拦截无效时段的事件：

eventAllow: function(info) {
  const eventStart = info.event.start;
  const dayStart = new Date(eventStart.setHours(0,0,0,0));
  
  const amRange = {
    start: new Date(dayStart.setHours(10,30,0)),
    end: new Date(dayStart.setHours(12,0,0))
  };
  const pmRange = {
    start: new Date(dayStart.setHours(14,30,0)),
    end: new Date(dayStart.setHours(19,0,0))
  };
  
  return (eventStart >= amRange.start && info.event.end <= amRange.end) || 
         (eventStart >= pmRange.start && info.event.end <= pmRange.end);
}

4. 修正下午起始刻度偏差 #

如果用户误选了14:15这个无效起始点，在select回调中自动修正到14:30：

select: function(info) {
  const start = info.start;
  if (start.getHours() === 14 && start.getMinutes() === 15) {
    // 调整到14:30，结束时间对应45分钟slot
    const correctedStart = new Date(start);
    correctedStart.setMinutes(30);
    const correctedEnd = new Date(correctedStart);
    correctedEnd.setMinutes(correctedEnd.getMinutes() + 45);
    
    // 取消原选择，重新选择修正后的时段
    calendar.unselect();
    calendar.select(correctedStart, correctedEnd);
  }
  // 后续添加事件的逻辑写在这里
}

注意事项 #

• CSS中的data-time值需要严格对应slot生成的时间节点，确保所有中间无效行都被隐藏
• 若使用FullCalendar v6+版本，部分回调参数可能有细微调整，请对应官方文档修改
• 测试时需覆盖单个slot选择、跨slot选择、边界时间事件添加等场景

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