Angular 14中使用CDK实现事件日历拖拽功能的问题求助

问题分析 #

你当前代码的核心问题：

• 错误地将cdkDrag、cdkDragHandle绑定在整个<ngx-event-calendar>组件上，导致整个日历被当作拖拽对象，而非单个事件项
• 未给日历的日期单元格配置cdkDropList作为拖拽目标容器，无法接收拖拽的事件
• 缺少拖拽完成后更新事件日期的逻辑

解决方案步骤 #

1. 导入Angular CDK模块 #

确保你的AppModule或功能模块中导入拖拽所需模块：

import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
  imports: [
    // ...其他模块
    DragDropModule
  ]
})
export class AppModule { }

2. 修改模板：为单个事件和日期单元格配置拖拽/放置 #

利用ngx-event-calendar的自定义模板能力（若组件支持），为每个事件添加拖拽指令，为日期单元格添加放置容器：

<div cdkDropListGroup>
  <ngx-event-calendar
    [showAddButton]="true" 
    [language]="'en'"
    [dataSource]="dataArray"
    (dayEvents)="selectDay($event)"
    (newEvent)="addEvent($event)"
  >
    <!-- 自定义事件模板：给每个事件添加拖拽指令 -->
    <ng-template #eventTemplate let-event="event">
      <div 
        cdkDrag 
        [cdkDragData]="event"
        style="padding: 8px; margin: 4px; cursor: grab; background: {{event.color}}; color: white;"
      >
        <strong>{{event.title}}</strong>
        <p>{{event.desc}}</p>
      </div>
    </ng-template>

    <!-- 自定义日期单元格模板：添加放置容器 -->
    <ng-template #dayCellTemplate let-day="day">
      <div 
        cdkDropList 
        [cdkDropListData]="day.date"
        (cdkDropListDropped)="onEventDropped($event)"
        style="height: 100%; width: 100%; padding: 4px;"
      >
        <!-- 渲染当前日期的所有事件 -->
        <ng-container *ngFor="let event of day.events">
          <ng-container [ngTemplateOutlet]="eventTemplate" [ngTemplateOutletContext]="{event: event}"></ng-container>
        </ng-container>
      </div>
    </ng-template>
  </ngx-event-calendar>
</div>

3. 实现拖拽完成的逻辑处理 #

在AppComponent.ts中添加方法，更新拖拽事件的日期：

import { CdkDragDrop } from '@angular/cdk/drag-drop';

export class AppComponent {
  title = 'calendar';
  language: string = 'en';
  newEvent = {} as IEventData;
  dataArray: IEventData[];

  constructor(public dialog: MatDialog) {
    const testData: IEventData[] = [];
    this.newEvent.id = 13;
    this.newEvent.title = 'Title';
    this.newEvent.desc = 'Description';
    this.newEvent.startDate = new Date("2022-12-22T21:00:00");
    this.newEvent.endDate = new Date("2022-12-22T21:00:00");
    this.newEvent.createdBy = 'Mark';
    this.newEvent.createdAt = new Date("2022-12-22T10:00:00");
    this.newEvent.type = 2;
    this.newEvent.color = 'red';
    testData.push(this.newEvent);
    this.dataArray = testData;
  }

  // 处理拖拽完成事件
  onEventDropped(event: CdkDragDrop<IEventData, any, Date>) {
    const draggedEvent = event.item.data;
    const targetDate = event.container.data;

    // 保留事件的时间部分，更新日期
    const timeOffset = draggedEvent.startDate.getTime() % (24 * 60 * 60 * 1000);
    draggedEvent.startDate = new Date(targetDate.getTime() + timeOffset);
    draggedEvent.endDate = new Date(targetDate.getTime() + timeOffset);

    // 触发数组变更检测，让日历重新渲染
    this.dataArray = [...this.dataArray];
  }

  addEvent(event) {
    // 你的添加事件逻辑
  }

  selectDay(event) {
    if (event.events) {
      const dialogRef = this.dialog.open(AddEventDialogComponent, {
        width: '80%',
        height: '90%', 
        data: event
      });
    }
  }
}

额外说明 #

• 如果ngx-event-calendar不支持自定义模板，需通过ViewChildren获取事件和单元格元素，手动绑定CDK拖拽指令
• 可通过CDK内置样式类（如cdk-drag-preview）自定义拖拽预览效果
• 若需支持跨天事件拖拽，需额外处理结束日期的计算逻辑

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