在angular2上使用FullCalendar的eventMouseOver [英] eventMouseOver with FullCalendar on angular2

问题描述

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

I'm currently working on a project. I need to implement a calendar in an angular2 project so I choose FullCalendar.io

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

My dayClick and eventClick event work very well but my eventMouseOver don't trigger.

我正在使用fullcalendar的3.6.1版本

I'm working with the version 3.6.1 of fullcalendar

我的planning.component.html

My 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

My 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);
      }
    }

推荐答案

您可以在calendarOptions中将处理程序添加到fullcalendar的eventMouseover事件中.可以在文档中看到这些参数.

You can add an handler to the eventMouseover event of the fullcalendar in your calendarOptions. The parameters can be seen in the 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
}

这篇关于在angular2上使用FullCalendar的eventMouseOver的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！