angular2 上带有 FullCalendar 的 eventMouseOver

Question

我目前正在做一个项目。我需要在 angular2 项目中实现日历，所以我选择 FullCalendar.io

我的 dayClick 和 eventClick 事件运行良好，但我的 eventMouseOver 没有触发。

我正在使用 3.6.1 版的 fullcalendar

我的planning.component.html

<div *ngIf="calendarOptions">
<ng-fullcalendar #ucCalendar [options]="calendarOptions" (eventClick)="updateEvent($event.detail)" (eventMouseOver)="updateEvent($event.detail)" (dayClick)="showDate($event.detail)">

我的planning.component.ts

export class PlanningComponent implements OnInit {
      calendarOptions: Options;
      @ViewChild(CalendarComponent) ucCalendar: CalendarComponent;
      constructor() {}
      ngOnInit() {
        this.calendarOptions = {
          editable: true,
          customButtons: {
            myCustomButton: {
              text: 'custom!',
              click: function () {
                alert('clicked the custom button!');
              }
            }
          },
          eventLimit: true,
          locale: 'fr',
          fixedWeekCount: false,
          header: {
            left: 'prev,next,today,myCustomButton',
            center: 'title',
            right: 'month,agendaWeek,agendaDay,listMonth'
          },
          events: [
            {
              title: 'test',
              end: '2018-07-10',
              start: '2018-07-11',
              color: 'red',
              className: [
                'test',
                'test2'
              ]
            },
          ],
          views: {
            month: {
              eventLimit: 2
            }
          },
        };
      }
      updateEvent(event) {
        console.log(event);
      }
      showDate(date) {
        console.log(date);
      }
    }

Answer 1

您可以在 calendarOptions 中为 fullcalendar 的 eventMouseover 事件添加处理程序。参数见documentation。

ngOnInit() {
    this.calendarOptions = {
        // Your other options
        eventMouseover: (event, jsEvent, view) => this.eventMouseOver(event, jsEvent, view)
    };
}


eventMouseOver(event, jsEvent, view) {
    // TODO: Open popover with event data
}