FullCalendar 6.1.8:allDay事件无法在全天槽间拖拽的问题求助
问题原因及解决方案
核心问题1:eventDrop回调的日期判断逻辑错误
allDay事件的end会被FullCalendar默认设置为start的下一天(比如start是2023-12-12,end自动变为2023-12-13),所以event.start.getDay() !== event.end.getDay()这个判断对allDay事件永远成立。当你把allDay事件拖拽到全天槽时,该逻辑触发eventResizeInfo.revert(),强制事件弹回原位置。
修复代码:
修改eventDrop和eventResize回调,增加对allDay事件的判断,跳过跨天检查:
eventResize: function(eventResizeInfo) { var event = eventResizeInfo.event; // 仅对非allDay事件做跨天限制 if (!event.allDay && event.start.getDay() !== event.end.getDay()) { eventResizeInfo.revert(); } }, eventDrop: function(eventResizeInfo) { var event = eventResizeInfo.event; // 仅对非allDay事件做跨天限制 if (!event.allDay && event.start.getDay() !== event.end.getDay()) { eventResizeInfo.revert(); } },
核心问题2:eventReceive中错误使用事件属性
在eventReceive回调里添加新事件时,用了wholeDay: allDay,但FullCalendar的标准属性是allDay而非wholeDay。这个错误会导致新添加的事件allDay状态异常,进一步干扰拖拽行为。
修复代码:
修正属性名:
eventReceive: function(event) { const events = calendar.getEvents(); const title = event.event.title; const start = event.event.startStr; const end = event.event.endStr; const allDay = event.event.allDay; event.event.remove(); calendar.addEvent({ id: generate_uuidv4(), // 确保该函数已正确定义 title: title, start: start, end: end, allDay: allDay, // 将wholeDay改为allDay }); },
可选优化:检查forceEventDuration配置
forceEventDuration: true会强制所有事件必须有明确的end时间,但allDay事件默认由FullCalendar自动处理end为次日,该配置可能和allDay的默认逻辑冲突。如果不需要强制所有事件必须有duration,可考虑移除该配置,或确保allDay事件的end设置符合预期。
额外注意事项
- 确保
generate_uuidv4()函数已正确定义,否则添加事件时会报错。 - allDay事件在
timeGridWeek视图中,全天槽的拖拽需保证事件的allDay属性始终为true,避免状态切换导致的异常。
内容的提问来源于stack exchange,提问作者Ariadni Makari
相关产品推荐
相关产品推荐

