FullCalendar 4.3.1拖拽事件时end值为null问题求助

我之前也碰到过FullCalendar 4.x版本这个拖拽后end字段变成null的问题，大概率是事件被自动识别成allDay类型导致的，给你拆解下原因和解决思路：

为什么会出现这个问题？ #

FullCalendar 4.x会根据你传入的start和end格式自动判断allDay属性：

• 如果你的事件start/end是仅日期的字符串（比如'2024-05-20'，不带时分秒），FullCalendar会默认把这个事件标记为allDay: true。
• 对于allDay事件，FullCalendar有个特殊逻辑：如果事件的end和start是同一天，它会自动把end设为null（因为allDay事件的end是排他性的，比如start: '2024-05-20'的allDay事件，默认end是'2024-05-21'，但如果你的原始end和start相同，就会被处理成null）。
• 当你拖拽这类allDay事件时，回调里的info.event.end自然就变成null了。

具体解决方案 #

1. 给事件数据添加完整的ISO日期时间格式

修改你从数据库取到的事件数据，把start和end转换成带时间的ISO字符串，比如：

// 假设数据库返回的start是日期字符串，补充时间部分
const eventData = {
  id: row['id'],
  title: row['title'],
  start: `${row['start']}T09:00:00`, // 比如给日期加上上午9点的时间
  end: `${row['end']}T10:00:00`,     // 对应加上结束时间
  backgroundColor: row['color'],
  borderColor: row['color'],
  allDay: false // 显式声明非allDay事件
};

这样FullCalendar会明确识别为非全天事件，保留end字段。

2. 强制设置allDay: false

哪怕你的start/end已经带时间，也一定要给每个事件显式加上allDay: false，避免FullCalendar自动推断出错。这个步骤是关键，我之前就是漏了这个导致问题一直没解决。

在你的fillCalendar方法里，生成事件数据时加上这个属性就行，代码参考上面的例子。

3. 备选：在回调中手动计算end值

如果因为业务原因没法修改事件数据格式，可以在eventDrop回调里通过原始事件的持续时间来计算新的end：

eventDrop: function(info) {
  let eventEnd;
  if (info.event.end) {
    eventEnd = info.event.end;
  } else {
    // 获取拖拽前的原始事件，计算持续时长
    const originalStart = info.oldEvent.start.getTime();
    const originalEnd = info.oldEvent.end.getTime();
    const duration = originalEnd - originalStart;
    // 用新的start加上持续时长得到新的end
    eventEnd = new Date(info.event.start.getTime() + duration);
  }
  moveTask(info.event.id, info.event.start, eventEnd);
}

这个方案用原生Date对象就能实现，不需要额外依赖。

验证小技巧 #

在eventDrop回调里加一行console.log(info.event)，打印出事件对象，看看allDay属性是不是false，以及end字段有没有值，这样能快速定位问题。

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