如何让 Fullcalendar 的外部事件在 Angular 中工作？

Question

我一直在尝试让外部事件与 Fullcalendar 和 Angular 一起工作。我承认我是 Angular 的新手，有些东西我显然不明白。

Fullcalendar 有一个关于使用 Angular 进行设置的页面，即here。我以这种方式设置了主日历，一切都运行良好，直到我想将外部事件放到日历上。显然有一个需要使用的 Draggable 对象，还有一些 documentation about how to use it using Typescript，但试图将其转化为他们所说的设置日历的方式让我感到沮丧。

搜索任何显示如何在 Angular 中为 fullcalendar 设置可拖动对象的内容只找到了一个代码示例，即 here。考虑到我希望将其添加到新组件中，我无法让他们的 Draggable 项目代码正常工作。这对我来说似乎很麻烦。

new Draggable(this.external.nativeElement, {
  itemSelector: '.fc-event',
  eventData: function(eventEl) {
    return {
      title: eventEl.innerText
    };
  }
});

我已经创建了一个外部事件组件来处理这些，但我已经在我创建日历的组件中尝试过它并得到完全相同的错误。这里是external-events.component.html：

<div class="external-event-list">
  <div class="fc-event" *ngFor="let job of jobs" data-event="{{job}}" #external>{{job.customer.first_name}} {{job.customer.last_name}}</div>
</div>

这里是external-events.component.ts：

import {AfterContentInit, Component, ElementRef, OnInit, ViewChildren} from '@angular/core';
import {HttpClient, HttpErrorResponse} from '@angular/common/http';
import {Draggable} from '@fullcalendar/interaction';


@Component({
  selector: 'app-external-events',
  templateUrl: './external-events.component.html',
  styleUrls: ['./external-events.component.css'],
})

export class ExternalEventsComponent implements OnInit, AfterContentInit {
  @ViewChildren('external', {static: true}) external: any;
  jobs: string [];

  constructor(private httpService: HttpClient) {
  }

  ngOnInit(): void {
    this.httpService.get('http://127.0.0.1:7000/api/schedule/unscheduled/?format=json').subscribe(
      (data) => {
        this.jobs = data as string [];
      },
      (err: HttpErrorResponse) => {
        console.log(err.message);
      },
    );
  }

  ngAfterViewInit(): void {
    this.external = new ElementRef('external');
    new Draggable(this.external.nativeElement, {
      itemSelector: '.fc-event',
      eventData: (eventEl) => {
        console.log(eventEl);
        return {
          title: eventEl.innerText,
        };
      },
    });
  }
}

在调用 Draggable 时，我不断收到错误 containerEl.addEventListener is not a function。我不知道containerEl 驻留在哪里，因为它不在我的代码中的任何地方。我假设它是完整日历代码的一部分。我的猜测是它正在尝试将侦听器附加到日历，但找不到它。

我需要做什么才能让可拖动的工作？

编辑 这是错误的堆栈跟踪（external-events.component.ts 的第 34 行是我调用 Draggable 的地方）：

ERROR TypeError: containerEl.addEventListener is not a function
    at new PointerDragging (main.js:125)
    at new FeaturefulElementDragging (main.js:780)
    at new ExternalDraggable (main.js:2031)
    at ExternalEventsComponent.ngAfterViewInit (external-events.component.ts:34)
    at callHook (core.js:2481)
    at callHooks (core.js:2451)
    at executeInitAndCheckHooks (core.js:2403)
    at refreshView (core.js:9242)
    at refreshComponent (core.js:10324)
    at refreshChildComponents (core.js:8968)
defaultErrorLogger  @   core.js:6006
handleError @   core.js:6054
(anonymous) @   core.js:29191
invoke  @   zone-evergreen.js:364
run @   zone-evergreen.js:123
runOutsideAngular   @   core.js:28195
tick    @   core.js:29191
(anonymous) @   core.js:29070
invoke  @   zone-evergreen.js:364
onInvoke    @   core.js:28267
invoke  @   zone-evergreen.js:363
run @   zone-evergreen.js:123
run @   core.js:28150
next    @   core.js:29069
schedulerFn @   core.js:25632
__tryOrUnsub    @   Subscriber.js:183
next    @   Subscriber.js:122
_next   @   Subscriber.js:72
next    @   Subscriber.js:49
next    @   Subject.js:39
emit    @   core.js:25622
checkStable @   core.js:28203
onHasTask   @   core.js:28281
hasTask @   zone-evergreen.js:419
_updateTaskCount    @   zone-evergreen.js:440
_updateTaskCount    @   zone-evergreen.js:263
runTask @   zone-evergreen.js:184
drainMicroTaskQueue @   zone-evergreen.js:569
Promise.then (async)        
scheduleMicroTask   @   zone-evergreen.js:552
scheduleTask    @   zone-evergreen.js:388
scheduleTask    @   zone-evergreen.js:210
scheduleMicroTask   @   zone-evergreen.js:230
scheduleResolveOrReject @   zone-evergreen.js:847
then    @   zone-evergreen.js:979
bootstrapModule @   core.js:28855
zUnb    @   main.ts:11
__webpack_require__ @   bootstrap:79
0   @   scheduler.component.ts:18
__webpack_require__ @   bootstrap:79
checkDeferredModules    @   bootstrap:45
webpackJsonpCallback    @   bootstrap:32
(anonymous) @   main.js:1

Answer 1

好的，我想通了。我做错了一些事情。

首先，我将属性装饰器放在了 HTML 模板中的错误元素上。 #element 应该在父 div 上。像这样：

<div class="external-event-list" #external>
  <div class="fc-event" *ngFor="let job of jobs" data-event="{{job}}">{{job.customer.first_name}} {{job.customer.last_name}}</div>
</div>

我认为 Draggable 想要访问每个可拖动项，但它确实想要父项，并且它使用 .fc-event 选择器在该容器内找到可拖动项。

这是供将来遇到此问题的任何人使用的外部事件组件：

import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {HttpClient, HttpErrorResponse} from '@angular/common/http';
import {Draggable} from '@fullcalendar/interaction';


@Component({
  selector: 'app-external-events',
  templateUrl: './external-events.component.html',
  styleUrls: ['./external-events.component.css'],
})

export class ExternalEventsComponent implements OnInit, AfterViewInit {
  @ViewChild('external') external: ElementRef;
  jobs: string [];

  constructor(private httpService: HttpClient) {
  }

  ngOnInit(): void {
    this.httpService.get('http://127.0.0.1:7000/api/schedule/unscheduled/?format=json').subscribe(
      (data) => {
        this.jobs = data as string [];
      },
      (err: HttpErrorResponse) => {
        console.log(err.message);
      },
    );
  }

  ngAfterViewInit(): void {
    new Draggable(this.external.nativeElement, {
      itemSelector: '.fc-event',
      eventData: (eventEl) => {
        return {
          title: eventEl.innerText,
        };
      },
    });
  }
}