实现 Angular 日历组件：如何拖动和创建事件？

npm 安装-g @angular/cli

ng 新的角度日历演示cd 角度日历演示

npm 安装 angular-calendar date-fns

@import "../node_modules/angular-calendar/css/angular-calendar.css";

从'@angular/core'导入{NgModule}；从'@angular/platform-browser'导入{BrowserModule}；从'./app-routing.module'导入{AppRoutingModule}；从 './app.component' 导入 { AppComponent }；从 'angular-calendar' 导入 { CalendarModule, DateAdapter };从 'angular-calendar/date-adapters/date-fns' 导入 { adapterFactory }；从'./view/drag-comp/drag-comp.component'导入{DragCompComponent}；@NgModule({
  声明：[AppComponent, DragCompComponent],
  进口：[
    浏览器模块，
    应用路由模块，
    CalendarModule.forRoot({
      提供：日期适配器，
      使用工厂：适配器工厂，
    }),
  ],
  供应商：[]，
  引导程序：[AppComponent]，})导出类 AppModule {}

ng 生成组件 drag-comp

从'@angular/core'导入{ChangeDetectorRef}；进口 {
  变更检测策略，
  成分，
  启动时，
  查看封装，} 来自“@angular/core”；从 'angular-calendar' 导入 { CalendarEvent, CalendarEventTitleFormatter };从'calendar-utils'导入{WeekViewHourSegment};从'date-fns'导入{addDays，addMinutes，endOfWeek};从'rxjs'导入{fromEvent}；从 'rxjs/operators' 导入 { finalize, takeUntil };函数 floorToNearest（数量：数字，精度：数字）{
  返回 Math.floor（数量/精度）*精度；}函数 ceilToNearest（数量：数字，精度：数字）{
  返回 Math.ceil（数量/精度）*精度；}@成分（{
  选择器：'app-drag-comp'，
  templateUrl: './drag-comp.component.html',
  styleUrls: ['./drag-comp.component.scss'],
  changeDetection：ChangeDetectionStrategy.OnPush，
  供应商：[
    {
      提供：CalendarEventTitleFormatter，
    },
  ],
  封装：ViewEncapsulation.None，})导出类 DragCompComponent 实现 OnInit {
  viewDate = new Date();
  weekStartsOn: 0 = 0;
  dragToCreateActive = false;
  事件：CalendarEvent[] = []；
  天数：任何[] = []；
  插槽：任何[] = []；
  构造函数（私有 cdr：ChangeDetectorRef）{}
  ngOnInit(): void {
    这个.initDays();
  }
  初始化天数（）{
    这天 = [
      '星期日'，
      '周一'，
      '周二'，
      '周三'，
      '周四'，
      '星期五'，
      '周六'，
    ];
    for (let i = 0; i < this.days.length; i++) {
      让 a = { day: this.days[i], time: [] };
      this.slots.push(a);
    }
  }
  startDragToCreate(
    段：WeekViewHourSegment，
    mouseDownEvent: 鼠标事件,
    段元素：HTMLElement
  ) {
    const dragToSelectEvent: 日历事件 = {
      编号：this.events.length，
      title: '新插槽',
      开始：段.日期，
      元：{
        tmpEvent：真，
      },
      行动：[
        {
          标签： '',
          onClick: ({ event }: { event: CalendarEvent }): void => {
            this.events = this.events.filter((iEvent) => iEvent !== event);
            this.removeSlot(event.id);
          },
        },
      ],
    };
    this.events = [...this.events, dragToSelectEvent];
    const segmentPosition = segmentElement.getBoundingClientRect();
    this.dragToCreateActive = true;
    const endOfView = endOfWeek(this.viewDate, {
      weekStartsOn：this.weekStartsOn，
    });
    fromEvent（文档，'mousemove'）
      。管道（
        完成（（）=> {
          删除 dragToSelectEvent.meta.tmpEvent；
          this.dragToCreateActive = false;
          这个。刷新（）；
        }),
        takeUntil（fromEvent（文档，'mouseup'））
      )
      .subscribe((mouseMoveEvent: MouseEvent) => {
        常量 minutesDiff = ceilToNearest(
          mouseMoveEvent.clientY - segmentPosition.top,
          30
        );
        const daysDiff =
          floorToNearest(
            mouseMoveEvent.clientX - segmentPosition.left,
            段位置.宽度
          ) / segmentPosition.width;
        const newEnd = addDays(addMinutes(segment.date, minutesDiff), daysDiff);
        如果（newEnd > segment.date && newEnd < endOfView）{
          dragToSelectEvent.end = newEnd;
        }
        这个。刷新（）；
      });
  }
  私人刷新（）{
    this.events = [...this.events];
    this.cdr.detectChanges();
    this.getSlots();
  }
  转换时间（t）{
    返回新日期（t）.toTimeString（）；
  }
  转换日（d）{
    返回新日期（d）.toLocaleString（'en-us'，{
      工作日：“长”，
    });
  }
  getSlots() {
    this.slots.map((day, i) => {
      this.slots[i].time = [];
      this.events.forEach((e) => {
        如果（day.day == this.convertDay（e.start））{
          this.slots[i].time.push({
            开始时间：e.start，
            结束时间：e.end，
            id: e.id,
          });
        }
      });
    });
  }
  removeSlot(id) {
    for (let j = 0; j < this.slots.length; j++) {
      this.slots[j].time = this.slots[j].time.filter((t) => t.id !== id);
    }
  }}

<div 类="容器">
  <ng-模板#weekViewHourSegmentTemplate
     让段=“段”发泄
     让语言环境=“语言环境”
     let-segmentHeight="segmentHeight"
     let-isTimeLabel="isTimeLabel"
   >
    <div #segmentElement
       class="cal-hour-segment"
       [style.height.px]="segmentHeight"   
       [class.cal-hour-start]="segment.isStart"
       [class.cal-after-hour-start]="!segment.isStart"
       [ngClass]="segment.cssClass"
       (mousedown)="startDragToCreate(segment, $event, segmentElement)">
        <div class="cal-time" *ngIf="isTimeLabel">
            {{ 分段日期 | calendarDate:'weekViewHour':locale }}
        </div>
    </div></ng-模板></div><mwl-日历周视图
    [viewDate]="viewDate" [events]="事件"
    [hourSegmentTemplate]="weekViewHourSegmentTemplate"
    [weekStartsOn]="weekStartsOn"></mwl-日历周视图><小时><div>选定的广告位</div><pre>{{ 插槽 | JSON }}</pre>

服务