fullcalendar eventMouseover rerenderEvents

fullcalendar eventMouseover rerenderEvents

本文关键字:rerenderEvents eventMouseover fullcalendar      更新时间:2023-09-26

我正在使用多个资源的fullcalendar fork。我想使用回调"eventMouseover"来改变边框颜色为所有事件具有相同的标题,我有这样的东西:

eventMouseover: function( event, jsEvent, view ) {
    //get day viewed
    var currentViewDate = $('#calendar').fullCalendar('getDate')
    var events = $('#calendar').fullCalendar( 'clientEvents', function(event) {
        //get list of events for displayed day
        if (moment(event.start).format('YYYY-MM-DD') == currentViewDate.format('YYYY-MM-DD')) {
            return true;    
        }
    });
    //search events with the same title as event where is mouse over
    for (var i = 0; events.length > i ; i++) {
        if (events[i].title == event.title) {
            events[i].borderColor = 'blue'
            console.log(event.title)
        }
    }
    $('#calendar').fullCalendar( 'rerenderEvents')
}

它可以工作,意味着它改变了特定事件的边框颜色,但是当我把鼠标放在事件上时,会出现奇怪的事情,浏览器的内存使用正在快速增长,CPU占用了大约50%。看起来它在不断地重新渲染事件。

正如你在上面的代码中看到的,我把
console.log(event.title)

检查具有特定标题的事件在控制台中显示的次数。

没有

$('#calendar').fullCalendar( 'rerenderEvents')

计数是正确的,每次当我把鼠标指针在事件,但边界颜色不改变,但是用

$('#calendar').fullCalendar( 'rerenderEvents')

计数是不正确的,每次当鼠标指针在事件上时,控制台的计数不断增长,CPU数目也在增长,内存也在增长。但是,对于视图中具有相同标题的所有事件,边框都会更改。

是否可以执行

$('#calendar').fullCalendar( 'rerenderEvents')

只有一次当鼠标在事件上?或者有人可以用另一种方式帮我。

我认为这里的问题是,当您呈现事件时,eventMouseOver立即再次触发,导致另一次呈现,等等,直到您将鼠标保持在事件上。

为了防止这种情况,有多种解决方案,例如:标记事件(为其添加属性),并在函数中检查这一点,因此当它再次被调用时,您只需跳过。当然,这需要在鼠标移出时取消对事件的标记。

另一种方法是使用变量,如果它与您鼠标悬停的当前事件标题不同,则保存此新标题并调用呈现程序。在eventRender回调中,检查给定的事件是否具有相同的标题,如果是,更改其边框