Angular 12中如何将ng-zorro-antd日历与外部事件拖拽功能结合？

我来帮你搞定这个需求！既然ng-zorro的Calendar组件没有原生支持外部拖拽的配置项，我们可以通过HTML5原生的拖放API来手动扩展这个功能，步骤其实挺清晰的，我给你拆解并附上代码示例：

核心就是给可拖拽的事件元素绑定拖拽事件，再给日历的日期单元格添加放置监听，最后在放置完成后把事件数据关联到对应日期并更新日历展示。

1. 准备可拖拽的事件元素 #

先给需要拖拽的事件项开启拖拽能力，并在拖拽开始时把事件的关键数据存起来：

<!-- 示例：可拖拽的事件列表 -->
<div class="draggable-event" draggable="true" (dragstart)="onDragStart($event, {title: '团队同步会', duration: 1.5})">
  拖拽我到日历
</div>

<div class="draggable-event" draggable="true" (dragstart)="onDragStart($event, {title: '客户访谈', duration: 2})">
  拖拽这个到日历
</div>

2. 改造Ant Design日历，添加放置能力 #

通过nzDateCellRender自定义日历单元格模板，给每个单元格绑定拖放相关的事件，允许元素放置到单元格上：

<!-- Ant Design 日历组件 -->
<nz-calendar [nzDateCellRender]="dateCellTpl"></nz-calendar>

<ng-template #dateCellTpl let-date>
  <div 
    class="calendar-cell"
    (dragover)="onDragOver($event)"
    (drop)="onDrop($event, date)"
    (dragleave)="onDragLeave($event)"
  >
    <!-- 渲染当天已有的事件 -->
    <div class="event-item" *ngFor="let event of getDailyEvents(date)">
      {{event.title}}
    </div>
  </div>
</ng-template>

3. 组件类中处理拖放逻辑 #

在组件里实现拖拽开始、拖拽悬浮、放置完成的事件处理函数，把拖拽的事件数据和目标日期关联，更新事件列表：

import { Component } from '@angular/core';

@Component({
  selector: 'app-drag-calendar',
  templateUrl: './drag-calendar.component.html',
  styleUrls: ['./drag-calendar.component.css']
})
export class DragCalendarComponent {
  // 存储所有日历事件
  calendarEvents: Array<{date: Date, title: string, duration: number}> = [];

  onDragStart(event: DragEvent, eventData: any) {
    // 将事件数据转为字符串存入dataTransfer，方便后续获取
    event.dataTransfer?.setData('calendarEvent', JSON.stringify(eventData));
    // 可选：设置拖拽时的预览样式
    event.dataTransfer?.effectAllowed = 'copy';
  }

  onDragOver(event: DragEvent) {
    // 阻止默认行为，否则无法触发drop事件
    event.preventDefault();
    // 给单元格添加拖拽悬浮的高亮样式
    (event.target as HTMLElement).classList.add('drag-over');
  }

  onDragLeave(event: DragEvent) {
    // 移除高亮样式
    (event.target as HTMLElement).classList.remove('drag-over');
  }

  onDrop(event: DragEvent, targetDate: Date) {
    event.preventDefault();
    // 移除高亮样式
    (event.target as HTMLElement).classList.remove('drag-over');
    
    // 获取拖拽的事件数据
    const eventDataStr = event.dataTransfer?.getData('calendarEvent');
    if (!eventDataStr) return;

    const eventData = JSON.parse(eventDataStr);
    // 将事件添加到对应日期的列表中
    this.calendarEvents.push({
      date: targetDate,
      title: eventData.title,
      duration: eventData.duration
    });
  }

  // 过滤出指定日期的事件
  getDailyEvents(date: Date) {
    return this.calendarEvents.filter(event => 
      event.date.getFullYear() === date.getFullYear() &&
      event.date.getMonth() === date.getMonth() &&
      event.date.getDate() === date.getDate()
    );
  }
}

4. 添加样式优化交互体验 #

给拖拽元素和日历单元格加一些样式，让交互更直观：

.draggable-event {
  padding: 8px 16px;
  background-color: #1890ff;
  color: #fff;
  cursor: grab;
  display: inline-block;
  margin: 8px 12px 8px 0;
  border-radius: 4px;
}

.draggable-event:active {
  cursor: grabbing;
}

.calendar-cell {
  height: 100%;
  padding: 4px;
  min-height: 80px;
}

.calendar-cell.drag-over {
  background-color: #e6f7ff;
  border-radius: 4px;
}

.event-item {
  font-size: 12px;
  padding: 2px 4px;
  background-color: #f0f2f5;
  border-radius: 2px;
  margin-top: 2px;
}

• 如果需要支持周视图的精准时间拖拽（比如拖拽到上午9点），可以通过计算鼠标在单元格内的位置来换算具体时间
• 可以给拖拽事件添加拖拽预览图，通过event.dataTransfer?.setDragImage()实现
• 如果事件需要持久化，在onDrop后可以调用接口把事件数据保存到后端

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