Angular日历外部事件拖拽至Day View Scheduler指定用户异常求助

问题核心是拖拽外部事件时，事件的resourceId仍沿用externalEvents里的默认值，未被拖拽目标的用户栏ID覆盖。解决关键是在拖拽完成的回调中，手动将事件的resourceId替换为目标用户栏的ID。

具体实现步骤：

• 在day-view-scheduler组件上绑定eventDropped回调，用于处理拖拽完成后的逻辑
• 回调中获取拖拽目标对应的用户栏resourceId
• 基于拖拽的原始事件创建新事件，强制覆盖resourceId为目标栏的ID，再添加到日历事件列表中

代码示例：
模板部分：

<!-- 外部可拖拽事件 -->
<div
  *ngFor="let extEvent of externalEvents"
  mwl-draggable
  [dragData]="extEvent"
  class="external-event-item"
>
  {{ extEvent.title }}
</div>

<!-- 日视图调度器 -->
<mwl-day-view-scheduler
  [viewDate]="currentDate"
  [events]="calendarEvents"
  [resources]="userResources"
  (eventDropped)="onEventDrop($event)"
></mwl-day-view-scheduler>

组件类逻辑：

onEventDrop(dropInfo: {
  event: CalendarEvent;
  droppedOn: {
    resourceId: string | number;
    date: Date;
  };
}): void {
  // 移除重复的旧事件（如果是从外部拖入的重复实例）
  const duplicateIndex = this.calendarEvents.findIndex(
    e => e.id === dropInfo.event.id
  );
  if (duplicateIndex > -1) {
    this.calendarEvents.splice(duplicateIndex, 1);
  }

  // 构造新事件，强制设置目标用户栏的resourceId
  const targetEvent: CalendarEvent = {
    ...dropInfo.event,
    start: dropInfo.droppedOn.date,
    // 假设外部事件有预设时长，可根据实际调整
    end: new Date(dropInfo.droppedOn.date.getTime() + (dropInfo.event.meta?.duration || 3600000)),
    resourceId: dropInfo.droppedOn.resourceId, // 关键：覆盖为目标用户栏ID
    id: Math.random().toString(36).slice(2, 10) // 生成唯一ID避免冲突
  };

  this.calendarEvents = [...this.calendarEvents, targetEvent];
}

额外注意事项：

• 确保externalEvents中的事件不要硬写死resourceId，如果已经设置，必须在回调中覆盖
• 确认userResources数组中的每个用户栏资源都有唯一的id字段，保证拖拽时能正确识别目标ID
• 如果事件需要携带额外参数（比如时长），可通过meta字段存储，在构造新事件时一并传递

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