我目前正在研究一个项目。我需要在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);
}
}
答案 0 :(得分:0)
您可以在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
}