PrimeNG：为什么单击 FullCalendar 日期不会发出 dateclick 事件？如何处理对日历上特定日期的点击？

Question

我在 Angular 和 PrimeNG 方面还是个新手，我在尝试使用 FullCalendar 组件时发现了以下困难：https://primefaces.org/primeng/showcase/#/fullcalendar

问题是我想在用户点击我日历中的特定日期时处理一个事件（参考上一个链接示例：当用户点击将一天表示为日历的正方形时，我必须执行回调方法）。

所以我知道这个PrimeNG组件应该是基于https://fullcalendar.io/

我尝试过这种方式但它不起作用：

1) 这是我的 fullcalendard.component.html 页面：

全日历有效！

<div class="content-section implementation">
  <p-fullCalendar #calendar (dateClick)="handleDateClick($event)"
                  [events]="events"
                  [options]="options">
  </p-fullCalendar>
</div>

如你所见，我添加了：

(dateClick)="handleDateClick($event)"

为了在我渲染的日历的特定日期处理日期点击事件。

2) 然后我有这个 Angular 组件的“后端”代码，定义在我的 fullcalendar.component.ts 文件中：

import { Component, OnInit } from '@angular/core';
import { EventService } from '../event.service';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin from '@fullcalendar/interaction';

@Component({
  selector: 'app-fullcalendar',
  templateUrl: './fullcalendar.component.html',
  styleUrls: ['./fullcalendar.component.css']
})
export class FullcalendarComponent implements OnInit {

  events: any[];
  options: any;
  header: any;

  constructor(private eventService: EventService) {}

  ngOnInit() {
    this.eventService.getEvents().then(events => {this.events = events;});

    this.options = {
        plugins:[ dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin ],
        defaultDate: '2017-02-01',
        header: {
            left: 'prev,next',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        editable: true
    };
  }

  handleDateClick(dateClickEvent) {
    console.log("DATE CLICKED !!!");
  }

}

如您所见，我为此组件导入了一些插件，特别是我已经按照官方文档中的说明安装了它，通过以下声明：

npm install @fullcalendar/interaction --save

然后我创建了 handleDateClick() 方法来处理这个点击日期事件，并将 interactionPlugin 插入到 calendarPlugins 数组中我的组件，如下所述：dateClick not emitted in fullcalendar angular

之前的链接指向 PrimeNg 完整日历所基于的 https://fullcalendar.io/docs/angular。

但它不起作用：我的应用程序编译，日历显示在我的页面中，但点击我显示的日历上的特定日期没有任何反应。

为什么？怎么了？我错过了什么？如何修复我的代码并正确处理此事件？

Answer 1

来自 PrimeNG 完整日历docs：

FullCalendar 的回调也通过选项定义 属性。

所以试试下面的

选项 1

this.options = {
  plugins:[ dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin ],
  defaultDate: '2017-02-01',
  header: {
      left: 'prev,next',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
  },
  editable: true,
  dateClick: (dateClickEvent) =>  {         // <-- add the callback here as one of the properties of `options`
    console.log("DATE CLICKED !!!");
  }
};

选项 2

或者从回调函数访问成员变量和函数，将回调函数与参数this绑定。 （未经测试 - 可能无法按预期工作）

ngOnInit() {
  this.options = {
    plugins:[ dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin ],
    defaultDate: '2017-02-01',
    header: {
        left: 'prev,next',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    editable: true,
    dateClick: this.handleDateClick.bind(this)     // <-- bind the callback with argument `this`
  };
}

handleDateClick(dateClickEvent) {
  console.log("DATE CLICKED !!!");

  // access member variables and functions using `this` keyword
}