FullCalendar中如何限制仅在营业时间内创建事件？

当然可以做到！不管你用的是FullCalendar这类主流日历库，还是自己封装的日历组件，核心思路都是在用户选中时间区间的环节做校验，拦截不符合营业时间的操作。下面给你两种实用方案：

方案一：利用日历库的内置回调（推荐） #

大部分成熟的日历库（比如FullCalendar）都提供了专门的钩子来控制选择行为，比如selectAllow回调。你可以在这个回调里判断用户选中的时间是否落在设定的营业时间内，返回true或false来允许/阻止创建。

举个FullCalendar的示例代码：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    selectable: true, // 开启点击拖拽创建事件的功能
    selectAllow: function(info) {
      // 设定营业时间：每天9:00 - 18:00
      const businessStartHour = 9;
      const businessEndHour = 18;

      // 检查选中的起始时间和结束时间是否都在营业时间内
      const startIsValid = info.start.getHours() >= businessStartHour && info.start.getHours() < businessEndHour;
      const endIsValid = info.end.getHours() > businessStartHour && info.end.getHours() <= businessEndHour;
      
      // 额外处理跨天的情况（直接禁止）
      const isSameDay = info.start.getDate() === info.end.getDate();

      return isSameDay && startIsValid && endIsValid;
    },
    // 其他日历配置...
    select: function(info) {
      // 这里处理符合条件的事件创建逻辑
      alert(`创建事件：${info.startStr} 到 ${info.endStr}`);
      calendar.unselect(); // 清除选中状态
    }
  });
  calendar.render();
});

这个方案的好处是完全贴合库的原生逻辑，不需要额外处理复杂的鼠标事件，体验更流畅。

方案二：自定义事件拦截（适合自定义日历） #

如果是你自己开发的日历组件，可以通过监听鼠标的mousedown、mousemove、mouseup事件，实时记录选中的时间区间，在鼠标松开时校验是否符合营业时间：

• 鼠标按下时记录起始时间
• 鼠标移动时实时预览选中区域
• 鼠标松开时，判断选中的时间区间是否在营业时间内，不符合则提示用户并取消操作

关键点是：一定要在事件创建前完成校验，别等事件创建出来再删除，那样用户体验会很差。

额外提示 #

• 如果需要区分工作日和休息日（比如周末不允许创建），可以在校验逻辑里加上getDay()的判断（0是周日，6是周六）
• 可以给用户友好的提示，比如当选中非法时段时，弹出“仅允许在9:00-18:00创建事件”的提示框

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