FullCalendar内部事件拖拽需实时获取信息的问题及已解决方案

我之前也碰到过一模一样的困扰：拖拽外部事件的时候，靠draggable和drag选项就能在每次移动时实时拿到拖拽相关的信息，但处理日历内部已有的事件时，只能触发dragStart和dragStop这两个只执行一次的钩子，完全没法实现拖拽过程中实时获取数据的需求。

后来我终于找到了解决方案——用FullCalendar的eventAllow方法！

具体实现思路 #

eventAllow方法会在拖拽事件的每一步移动操作时都被调用，刚好能满足我们实时获取拖拽状态的需求。你可以在这个方法里拿到当前拖拽的事件对象、目标位置的日期/时间段信息，甚至能根据这些数据做实时校验或页面状态更新。

给你贴个简单的示例代码参考：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    // 这里放你的日历基础配置
    events: [/* 你的事件数据 */],
    eventAllow: function(dropInfo, draggedEvent) {
      // 每一次拖拽移动都会进入这个方法
      console.log('当前拖拽的事件详情:', draggedEvent);
      console.log('目标位置日期:', dropInfo.date);
      console.log('目标时间段:', dropInfo.start, dropInfo.end);
      
      // 你可以在这里做任何实时逻辑，比如更新页面提示、校验时间冲突等
      
      // 记得返回true允许拖拽到当前位置，返回false则禁止
      return true;
    }
  });

  calendar.render();
});

这样调整后，不管是外部事件拖拽还是内部事件拖拽，都能在拖拽过程中实时获取到你需要的动态信息了！

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