当鼠标悬停在日历事件上时，我需要渲染后台事件。每个日历事件都有一个与之关联的日期时间范围，当用户将鼠标悬停在日历上时，我想在日历上显示该日期时间范围（并随后在eventMouseout上从日历中删除背景事件）。但是，我遇到了一个问题，即在尝试修改鼠标进入/离开时的fullCalendar时，一遍又一遍地触发eventMouseover和eventMouseout事件。我想这与触及任何事件时重新呈现的日历有关在日历中添加/删除事件。
如果您查看this codepen，请打开DevTools并在将鼠标移到/移出任何日历事件时观察控制台。如果你在一个事件中来回移动你的鼠标，你会看到一遍又一遍地反复发射过度/结束事件。
我希望发生的是使用任何给定事件的日期时间范围更新的backgroundEvent（例如以下内容）。然后在mouseout上，从日历中删除backgroundEvent。
// I'm only here because StackOverflow requires code to be present when a codepen link is shared.
var bgEvent = {
id: -1,
start: null,
end: null,
rendering: 'background',
backgroundColor: 'orange'
};
相反，发生的事情是eventMouseover触发，呈现事件，然后是eventMouseout，它会立即删除事件。
编辑1：
我正在创建一个调度应用程序，日历事件基本上代表属于更大“约会”对象的各个任务。因此，当悬停在个人“任务”上时，我希望在日历上显示其相关的“约会”范围，以帮助用户决定是否可以将该任务移动到不同的日期/时间。
编辑2：
在FullCalendar的github repo上提交an issue。将根据那里的任何进展进行更新。
来自CODEPEN的代码
HTML
<div id="calendar"></div>
CSS
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
JAVASCRIPT
$(function() {
var calendar = $('#calendar');
var bgEvent = {
id: -1,
start: null,
end: null,
rendering: 'background',
backgroundColor: 'orange'
};
calendar.fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
eventMouseover: function (event, jsEvent, view) {
console.log('in');
bgEvent.start = event.start;
bgEvent.end = event.end;
var events = calendar.fullCalendar('clientEvents', bgEvent.id);
if (events.length) {
var e = events[0];
calendar.fullCalendar('updateEvent', e);
}
else
calendar.fullCalendar('renderEvent', bgEvent);
},
eventMouseout: function (event, jsEvent, view) {
console.log('out');
calendar.fullCalendar('removeEvents', bgEvent.id);
},
defaultDate: '2017-11-06',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2017-11-01'
},
{
title: 'Long Event',
start: '2017-11-07',
end: '2017-11-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-11-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-11-16T16:00:00'
},
{
title: 'Conference',
start: '2017-11-05',
end: '2017-11-07'
},
{
title: 'Meeting',
start: '2017-11-06T10:30:00',
end: '2017-11-06T12:30:00'
},
{
title: 'Lunch',
start: '2017-11-06T12:00:00'
},
{
title: 'Meeting',
start: '2017-11-06T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-11-06T17:30:00'
},
{
title: 'Dinner',
start: '2017-11-06T20:00:00'
},
{
title: 'Movie',
start: '2017-11-07T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-11-28'
}
]
});
});
答案 0 :(得分：1)