如何阻止用户在FullCalendar的Inverse Background区域拖拽创建事件

我完全懂你遇到的这个棘手问题——自带的selectOverlap和selectAllow好像都没法直接区分白色可选择区域和绿色Inverse Background区域，导致拦不住用户在绿色区域拖拽创建事件。别着急，咱们换个思路就能搞定：

核心思路 #

先把你的绿色Inverse Background区域用background类型的事件来定义（如果还没这么做的话），然后在selectAllow里通过FullCalendar的API，主动查询选中时间段内是否存在这类背景事件，以此判断是否允许用户进行选择操作。

具体实现步骤 #

1. 先把绿色区域转换成background事件，给它加个专属类名（比如inverse-bg）用来标识：

events: [
  // 你的常规业务事件
  { title: '团队同步会', start: '2024-05-20T10:00:00', end: '2024-05-20T11:00:00' },
  // Inverse Background绿色区域事件
  { 
    start: '2024-05-20T12:00:00', 
    end: '2024-05-20T14:00:00', 
    className: 'inverse-bg', 
    rendering: 'background' 
  }
]

2. 在selectAllow方法里，查询选中时间段内是否有重叠的绿色背景事件，有就返回false阻止选择：

selectAllow: function(selectInfo) {
  // 获取当前日历实例
  const calendar = selectInfo.view.calendar;
  
  // 查询选中时间范围内的绿色背景事件
  const overlappingBgEvents = calendar.getEvents({
    start: selectInfo.start,
    end: selectInfo.end,
    className: 'inverse-bg' // 对应你绿色区域事件的类名
  });
  
  // 只有当没有重叠的绿色背景事件时，才允许用户选择创建事件
  return overlappingBgEvents.length === 0;
}

特殊场景适配 #

如果你的绿色区域不是用background事件实现的，而是通过slotClassNames或自定义规则（比如非工作时间）定义的：

• 若是非工作时间，直接利用FullCalendar的businessHours配置，在selectAllow里判断选中时间是否处于工作时段：

selectAllow: function(selectInfo) {
  return selectInfo.start.isWorkingHour() && selectInfo.end.isWorkingHour();
}

• 若是自定义日期规则，可以在selectAllow里根据selectInfo.start和selectInfo.end的日期属性（比如星期、小时数）来判断是否属于绿色区域。

补充说明为什么之前的方法失效 #

• selectOverlap默认只检查选中区域和非background类型事件的重叠，绿色背景区域属于background事件，所以不会触发这个方法；
• selectAllow本身确实只提供基础的时间、资源信息，但我们可以通过日历实例的API主动查询当前时间段的背景事件，补充分辨区域的能力。

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