在angular2上使用FullCalendar的eventMouseOver

Question

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

我的dayClick和eventClick事件工作得很好，但我的eventMouseOver不会触发。

我正在使用fullcalendar的3.6.1版本

我的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
}