You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.04 09:26:03