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

Question

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

Fullcalendar 有一个关于使用 Angular 进行设置的页面，这里是 。 我以这种方式设置了主日历，一切都运行良好，直到我想将外部事件放到日历上。 显然有一个Draggable object 需要使用，并且有一些关于如何使用它的文档 Typescript ，但试图将其转化为他们所说的设置日历的方式让我感到沮丧。

搜索任何显示如何在 Angular 中为 fullcalendar 设置可拖动项的内容只显示了一个代码示例， 此处为 。 考虑到我希望将其添加到新组件中，我无法让他们的 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,
        };
      },
    });
  }
}

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

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

编辑这是错误的堆栈跟踪（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,
        };
      },
    });
  }
}