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

Question

我在 Angular 和 PrimeNG 中都是新手，我发现在尝试使用 FullCalendar 时遇到以下困难组件，这个：https://primefaces.org/primeng/showcase/#/fullcalendar

问题是我想在用户点击日历中的特定日期时处理一个事件（参考前面的 link 示例：当用户点击代表一天的方块时日历，我必须执行回调方法）。

所以我知道这个 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 组件的 "backend" 代码，定义到我的 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

之前的 links 引用了 PrimeNg 完整日历所基于的 https://fullcalendar.io/docs/angular。

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

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

Answer 1

来自 PrimeNG 全日历 docs:

Callbacks of the FullCalendar are also defined with the options property.

所以试试下面的方法

选项 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
}

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

PrimeNG: Why clicking on a FullCalendar date the dateclick event is not emitted? How can I handle the click on a specific date on my calendar?

typescript

primeng

angular

primeng-calendar