如何限制FullCalendar库中每个资源的并行事件数量？

完全可以实现这个需求！FullCalendar本身就提供了对应的配置和事件钩子来搞定这个场景，我给你梳理几个实用的方案，你可以根据自己的业务场景选择：

1. 用内置eventOverlap配置快速拦截重叠操作 #

这是最省心的方式，适合拖拽、调整事件时长的场景。在资源视图（比如resourceTimeline）中，我们可以通过自定义函数来判断同一资源下的事件是否重叠：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source', // 开源项目用这个许可证即可
    initialView: 'resourceTimelineDay',
    resources: [
      { id: 'a', title: '张三' },
      { id: 'b', title: '李四' }
    ],
    events: [
      { id: '1', resourceId: 'a', start: '2024-05-20T09:00:00', end: '2024-05-20T10:00:00', title: '团队早会' }
    ],
    // 核心逻辑：仅当事件不属于同一资源时，才允许重叠
    eventOverlap: function(existingEvent, newEvent) {
      return existingEvent.resourceId !== newEvent.resourceId;
    }
  });
  calendar.render();
});

配置好之后，用户拖拽或调整事件时，如果同一资源下有时间重叠的事件，FullCalendar会直接阻止操作，不需要额外写复杂逻辑。

2. 自定义录入事件前的手动验证 #

如果是通过自定义表单来新增事件，你可以手动查询目标资源在目标时间段内是否已有事件，用getEvents()方法就能实现：

// 假设这是你的自定义新增事件函数
function addNewEvent(resourceId, startTime, endTime, eventTitle) {
  // 查询指定资源在目标时间段内的重叠事件
  const overlappingEvents = calendar.getEvents({
    resourceId: resourceId,
    start: startTime,
    end: endTime,
    overlap: true // 只要有时间重叠就返回
  });

  if (overlappingEvents.length > 0) {
    alert('这个时间段该资源已经有安排啦，换个时间试试吧！');
    return;
  }

  // 没有重叠，正常添加事件
  calendar.addEvent({
    resourceId: resourceId,
    start: startTime,
    end: endTime,
    title: eventTitle
  });
}

这种方式能在用户提交表单前就给出明确提示，避免无效的事件录入。

3. 用selectAllow限制时间段选择 #

如果你的场景是点击日历空白处选择时间段来新增事件，那可以用selectAllow配置提前拦截不合法的选择：

selectAllow: function(selectInfo) {
  // 查询选中时间段内当前资源的已有事件
  const overlappingEvents = calendar.getEvents({
    resourceId: selectInfo.resource.id,
    start: selectInfo.start,
    end: selectInfo.end,
    overlap: true
  });
  // 只有没有重叠事件时，才允许用户选择这个时间段
  return overlappingEvents.length === 0;
}

这样用户在选择时间段时，如果该资源已有安排，就根本选不了对应的时段，体验会更流畅。

小提示：如果使用了资源视图（属于FullCalendar Scheduler组件），记得配置好许可证，开源项目用GPL许可证就没问题哦。

内容的提问来源于stack exchange，提问作者A-Tech