-1

我在 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 emit in fullcalendar angular

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

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

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

4

1 回答 1

2

来自 PrimeNG fullcalendar文档：

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
}
于 2020-05-15T18:31:10.787 回答