FullCalendar JS如何设置10:00至次日00:00的营业时间及选择约束

问题核心原因 #

FullCalendar默认将endTime: "00:00:00"判定为当日零点，早于startTime: "10:00:00"，导致时间区间无效全时段禁用；设置endTime: "23:59:59"时，结束时间为次日零点的时段（如23:00-00:00）会被判定为超出范围，因此无法选择。同时当前版本不支持仅配置startTime无endTime的约束规则。

解决方案1：用24:00标识结束时间（最简便） #

直接将结束时间设置为24:00:00而非00:00:00，FullCalendar会识别为当日结束时间，不会判定为早于开始时间，可完美覆盖10:00到次日零点的时段：

// 传入businessHours、eventConstraint、selectConstraint的配置统一改为
{
  startTime: "10:00:00",
  endTime: "24:00:00"
}

该方案可同时保留营业时间的灰色遮罩显示效果，无需额外逻辑。

解决方案2：自定义校验规则实现禁用指定时段 #

如果需要更灵活的控制（直接禁用00:00-10:00的时段而非设置允许范围），可以使用selectAllow和eventAllow自定义校验逻辑，优先级高于内置的约束规则：

// 日历配置中添加如下参数
selectAllow: function(selectInfo) {
  // 仅允许开始时间小时数≥10的时段被选择
  return selectInfo.start.getHours() >= 10;
},
eventAllow: function(dropInfo) {
  // 仅允许事件被拖拽到开始时间小时数≥10的时段
  return dropInfo.start.getHours() >= 10;
}

如果需要兼容跨天选择的场景，可以自行扩展判断逻辑，比如允许开始时间在当日10点后、结束时间在次日任意时间的选择操作。

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