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

Question

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

Fullcalendar 有一个关于使用 Angular 设置它的页面，即 here. I got the main calendar setup in this way, and things were all working excellent until I got to the point that I wanted to drop external events onto the calendar. Apparently there is a Draggable object that needs to be employed, and there is some documentation about how to use it using Typescript，但试图将其转化为按照他们所说的设置日历的方式工作让我很沮丧。

在 Angular 中搜索任何显示如何为 fullcalendar 设置 draggables 的东西只出现了一个代码示例，即 here。鉴于我希望将其添加到新组件中，我无法让他们的可拖动项代码正常工作。这是我觉得比较麻烦的一点。

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,
        };
      },
    });
  }
}

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

How do get the external events for Fullcalendar to work in Angular?

angular

typescript

fullcalendar

fullcalendar-5