Angular Full Calendar/Chronofy：拖拽约束下无法调整事件时长求助

方法1：用businessHours替代groupId约束 #

利用FullCalendar的businessHours配置定义可用时段，将事件约束绑定到该配置，既可以限制事件只能在可用时段内拖动，又支持调整时长。

具体步骤： #

1. 转换可用时段为businessHours格式
   把从Chronofy获取的可用时段数据映射为FullCalendar支持的结构：

   const businessHours = available_periods.available_periods.map((ap: any) => ({
     start: ap.start,
     end: ap.end
   }));
   

2. 更新日历基础配置
   将生成的businessHours赋值给日历配置，并开启全局编辑权限（也可单独给事件配置）：

   this.calendarOptions = {
     // 保留你原有的其他配置
     businessHours: businessHours,
     editable: true,
     durationEditable: true
   };
   

3. 修改事件的约束设置
   移除事件的groupId和constraint: 1，替换为绑定businessHours作为约束：

   this.setEventSources([
     // 保留可用时段的背景显示
     ...available_periods.available_periods.map((ap: any) => {
       ap.display = 'inverse-background';
       return ap;
     }), 
     // 处理已预订事件
     ...res.events.events.map((e: any) => {
       e.id = e.event_id;
       e.display = 'auto';
       e.className = 'tester';
       e.editable = true;
       e.durationEditable = true;
       e.startEditable = true;
       // 绑定businessHours约束
       e.constraint = 'businessHours';
       return e;
     })
   ]);
   

方法2：自定义约束函数（适配复杂场景） #

如果businessHours无法满足特殊逻辑需求，可以用自定义约束函数精确控制事件的可操作范围：

具体步骤： #

1. 存储可用时段数据
   先把可用时段转换为方便判断的日期对象格式：

   const availableTimeRanges = available_periods.available_periods.map((ap: any) => ({
     start: new Date(ap.start),
     end: new Date(ap.end)
   }));
   

2. 编写日期判断辅助函数
   用于检查单个日期是否在可用时段内：

   function isWithinAvailablePeriods(date: Date): boolean {
     return availableTimeRanges.some(range => {
       return date >= range.start && date < range.end;
     });
   }
   

3. 给事件设置自定义约束
   将事件的constraint设置为包含allowed函数的对象，判断事件调整后的完整时间段是否在可用范围内：

   this.setEventSources([
     ...available_periods.available_periods.map((ap: any) => {
       ap.display = 'inverse-background';
       return ap;
     }), 
     ...res.events.events.map((e: any) => {
       e.id = e.event_id;
       e.display = 'auto';
       e.className = 'tester';
       e.editable = true;
       e.durationEditable = true;
       e.startEditable = true;
       // 自定义约束逻辑
       e.constraint = {
         allowed: (span: {start: Date, end: Date}) => {
           // 确保事件的开始和结束时间都在可用时段内
           return isWithinAvailablePeriods(span.start) && isWithinAvailablePeriods(span.end);
         }
       };
       return e;
     })
   ]);
   

原方案失效原因 #

你之前用groupId=1作为约束，FullCalendar会将事件的移动和时长调整限制在同一个groupId的单块区域内。但你的可用时段是多个独立的时间段（每个都标记为groupId=1），当调整事件时长时，若结束时间超出当前所在的可用时段块，即使下一块也是groupId=1，FullCalendar也会判定为超出约束范围，从而禁止调整。而businessHours或自定义约束函数会检查整个时间段是否落在任意可用时段内，更贴合你的需求。

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