React + FullCalendar.IO：实现日历事件拖拽至外部容器的方案咨询

核心思路 #

FullCalendar内置事件拖拽能力，结合原生拖拽API即可实现日历到外部容器的拖拽。核心是通过FullCalendar的拖拽钩子传递事件数据，再让外部容器监听放置事件完成交互。

具体实现步骤 #

1. 配置FullCalendar的拖拽权限与数据传递 #

开启日历事件的可拖拽属性，并在拖拽开始时把事件数据存入拖拽对象：

import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';

<FullCalendar
  plugins={[dayGridPlugin, interactionPlugin]}
  events={yourEventList}
  editable={true} // 必须开启，允许事件拖拽
  eventDragStart={(info) => {
    // 将事件序列化为JSON存入拖拽数据
    info.jsEvent.dataTransfer.setData('text/plain', JSON.stringify(info.event));
    // 设置拖拽行为为移动（或copy）
    info.jsEvent.dataTransfer.effectAllowed = 'move';
  }}
  eventDrop={(info) => {
    // 判断拖拽目标是否为日历外部元素
    const isOutsideCalendar = !info.draggedEl.closest('.fc');
    if (isOutsideCalendar) {
      info.revert(); // 恢复日历中事件的原位置
      // 此处可触发外部容器的事件添加逻辑，或直接在外部容器的drop事件中处理
    }
  }}
/>

2. 给外部容器绑定拖拽监听事件 #

在独立的外部容器组件中，监听dragover和drop事件，处理拖拽过来的日历事件：

function ExternalEventContainer({ onEventAdd }) {
  const handleDragOver = (e) => {
    e.preventDefault(); // 必须阻止默认行为，才能触发drop事件
    e.dataTransfer.dropEffect = 'move';
  };

  const handleDrop = (e) => {
    e.preventDefault();
    // 解析拖拽过来的事件数据
    const eventData = JSON.parse(e.dataTransfer.getData('text/plain'));
    // 将事件添加到外部容器的列表中，或执行自定义逻辑
    onEventAdd(eventData);
    // 如果是移动操作，此处可调用日历的事件删除接口移除原事件
  };

  return (
    <div
      className="external-event-box"
      onDragOver={handleDragOver}
      onDrop={handleDrop}
      style={{ border: '1px dashed #666', padding: '1.5rem', marginTop: '1rem' }}
    >
      <p>拖拽日历事件到此处</p>
      {/* 外部容器的事件列表渲染 */}
    </div>
  );
}

3. 关键注意事项 #

• 必须开启FullCalendar的editable属性，否则事件无法被拖拽。
• eventDragStart中必须通过dataTransfer传递事件数据，外部容器才能获取到完整的事件信息。
• 拖拽到外部时，调用info.revert()可以避免日历自动更新事件位置，确保交互逻辑由自己控制。
• 外部容器的dragover事件必须阻止默认行为，否则drop事件不会触发。

4. 可选优化 #

• 拖拽过程中可通过eventDragStop钩子添加视觉反馈，比如给拖拽元素添加高亮样式。
• 如果外部容器是动态渲染的组件，可通过useEffect确保拖拽监听事件正确绑定。

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