拖拽外部可拖动事件到已有事件时更新FullCalendar事件

核心思路是在drop回调中直接检测拖拽落点的时间范围内是否存在已有事件，以此决定是更新已有事件还是创建新事件，替代之前依赖eventMouseEnter的方案（因为drop事件优先级高于mouse类事件，导致无法提前标记状态）。

具体实现步骤 #

1. 给外部可拖拽元素添加自定义数据属性，存储事件的关键信息（比如标题、时长、颜色等）：

<div class="external-event" data-title="testing 1" data-duration="60" data-color="#1a73e8">
  testing 1
</div>

2. 在React组件中获取FullCalendar实例引用，用于后续查询和操作事件：

import { useRef } from 'react';
import FullCalendar from '@fullcalendar/react';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';

const CalendarComponent = () => {
  const calendarRef = useRef(null);

  // 处理drop事件的核心函数
  const handleDrop = (info) => {
    // 计算拖拽事件的时间范围（从外部元素的duration属性获取时长）
    const dropStart = info.date;
    const dropEnd = dropStart.add(info.draggedEl.dataset.duration, 'minutes');

    // 查询当前timeGridDay视图中，与拖拽时间范围重叠的已有事件
    const targetEvents = calendarRef.current.getApi().clientEvents(event => {
      return (
        calendarRef.current.getApi().view.type === 'timeGridDay' &&
        event.start < dropEnd &&
        event.end > dropStart
      );
    });

    if (targetEvents.length > 0) {
      // 取第一个重叠事件（可根据需求扩展多事件处理逻辑）
      const targetEvent = targetEvents[0];

      // 更新已有事件的属性（同步外部拖拽事件的数据）
      targetEvent.setProp('title', info.draggedEl.dataset.title);
      targetEvent.setProp('backgroundColor', info.draggedEl.dataset.color);
      // 可添加更多需要同步的字段，比如描述、分类等

      // 触发日历视图更新
      calendarRef.current.getApi().updateEvent(targetEvent);

      // 调用前后端更新接口，同步修改到服务器
      // updateEventApi(targetEvent.id, { ...targetEvent._def.extendedProps, title: targetEvent.title, backgroundColor: targetEvent.backgroundColor })

      // 阻止默认的新建事件行为
      info.revert();
    } else {
      // 无重叠事件时，正常创建新事件
      const newEvent = {
        title: info.draggedEl.dataset.title,
        start: dropStart,
        end: dropEnd,
        backgroundColor: info.draggedEl.dataset.color
      };
      calendarRef.current.getApi().addEvent(newEvent);

      // 调用创建事件的接口
      // createEventApi(newEvent)
    }
  };

  return (
    <FullCalendar
      ref={calendarRef}
      plugins={[timeGridPlugin, interactionPlugin]}
      initialView="timeGridDay"
      droppable={true}
      drop={handleDrop}
      // 其他日历配置项
    />
  );
};

export default CalendarComponent;

关键细节说明 #

• 利用FullCalendar的clientEvents方法，可以精准查询当前视图中符合时间范围条件的事件，避免依赖不可靠的鼠标事件顺序。
• 通过info.revert()阻止默认的新建事件行为，确保落在已有事件上时不会生成重复事件。
• 外部元素的dataset属性用于传递事件数据，可根据业务需求灵活扩展字段。

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