eventMouseOver with FullCalendar on angular2

问题

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

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

I'm working with the version 3.6.1 of fullcalendar

My planning.component.html

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

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

回答1:

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
}

来源：https://stackoverflow.com/questions/51384212/eventmouseover-with-fullcalendar-on-angular2

标签

angular

fullcalendar

mouseover