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

Question

我在“角”方面非常新，而且在PrimeNG中，我发现在使用FullCalendar组件时遇到了以下困难：https://primefaces.org/primeng/showcase/#/fullcalendar

问题是，当用户单击日历中的特定日期时，我想要处理一个事件(参考前面的链接示例:当用户单击Calendar中的一天正方形时，我必须执行回调方法)。

所以我知道这个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)然后，我将这个角组件的“后端”代码定义到我的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不以全日历角度发出

前面的链接引用到基于https://fullcalendar.io/docs/angular的PrimeNg完整日历。

但是它不起作用:我的应用程序编译，日历显示在我的页面中，但是点击我显示的日历上的特定日期，什么都不会发生。

为什么？怎么啦？我遗漏了什么？如何修复代码并正确处理此事件？

Answer 1

来自PrimeNG完整日历文档的

FullCalendar的回调也是用options属性定义的。

因此，请尝试以下几点

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