如何在FullCalendar 7中限制仅可选择1.5小时时长的事件

以下是针对你的需求的具体配置修改，确保用户只能选择符合要求的1.5小时事件，同时禁止非法的时长调整操作：

一、核心配置修改思路 #

1. 强制选择的时长固定为1.5小时
2. 验证选择的时段是否符合规则（同一天、在营业时长内、不与已有事件重叠）
3. 禁用事件的拖拽调整大小功能

二、完整修改后的代码 #

JavaScript 配置 #

document.addEventListener('DOMContentLoaded', function() {
  const calOpts = {
    locale: 'ee',
    slotDuration: '00:15:00',
    slotLabelInterval: '00:15',
    allDaySlot: false,
    // 配置营业时间段，根据实际业务调整
    businessHours: {
      daysOfWeek: [1, 2, 3, 4, 5], // 周一至周五
      startTime: '09:00',
      endTime: '17:00'
    },
    selectConstraint: 'businessHours',
    // 强制选择时长必须为1.5小时
    selectMinDuration: '01:30:00',
    selectMaxDuration: '01:30:00',
    // 验证选择的时段是否合法
    selectAllow: function(selectionInfo) {
      // 检查是否在同一天
      const isSameDay = selectionInfo.start.hasSame(selectionInfo.end, 'day');
      
      // 检查结束时间不超出当日营业结束时间
      const businessEnd = selectionInfo.start.startOf('day').set({
        hour: parseInt(this.businessHours.endTime.split(':')[0]),
        minute: parseInt(this.businessHours.endTime.split(':')[1])
      });
      const endsBeforeClose = selectionInfo.end <= businessEnd;
      
      // 检查是否与现有事件重叠
      const events = calendar.getEvents();
      const noOverlap = !events.some(event => {
        return selectionInfo.start < event.end && selectionInfo.end > event.start;
      });
      
      return isSameDay && endsBeforeClose && noOverlap;
    },
    select: function(selectionInfo) {
      // 自动计算并设置结束时间
      const endTime = selectionInfo.start.plus({ hours: 1.5 });
      document.getElementById('start').value = selectionInfo.start.toISO();
      // 新增结束时间字段，方便后端获取完整时段
      document.getElementById('end').value = endTime.toISO();
    },
    selectable: true,
    events: { url: 'api/fullcalendar' },
    // 禁用事件拖拽调整大小（禁止修改时长）
    eventResize: false
  };
  
  const calendarEl = document.getElementById('calendar');
  calendar = new FullCalendar.Calendar(calendarEl, calOpts);
  calendar.render();
});

对应 HTML 修改（新增结束时间字段） #

<form action="~/kinnitatud" method="post">
  <input type="hidden" name="start" id="start" />
  <input type="hidden" name="end" id="end" />
  <input type='submit'/>
</form>

三、配置说明 #

• 固定选择时长：selectMinDuration 和 selectMaxDuration 设置为相同值，强制用户只能选择1.5小时的时段，拖动选择时会自动锁定该时长。
• 合法性验证：selectAllow 函数确保三个核心规则：时段不跨天、结束时间不超过当日营业结束、不与已有事件重叠，任一条件不满足则禁止选择。
• 禁用时长调整：eventResize: false 直接关闭事件的拖拽调整功能，彻底阻止用户修改已有事件的时长。
• 完善表单数据：在select回调中自动计算结束时间并写入隐藏字段，后端可直接获取完整的事件时段信息。

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