Fullcalendar 完整日历，在eventMouseover/eventMouseout上修改日历

---

当鼠标悬停在日历事件上时，我需要渲染背景事件。每个日历事件都有一个与之关联的日期时间范围，当用户将鼠标悬停在该范围上时，我希望在日历上显示该范围（随后在eventMouseout上从日历中删除背景事件）。但是，我遇到了一个问题，当尝试在鼠标输入/离开时修改fullCalendar时，eventMouseover和eventMouseout事件被多次触发。我想这与在日历中添加/删除任何事件时重新呈现日历有关

// 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'
  };

如果您查看，请打开DevTools并在将鼠标移到/移出任何日历事件时观察控制台。如果在一个事件中来回移动鼠标，您将看到over/out事件背靠背、一次又一次地触发

我希望发生的是一个backgroundEvent（如下所示），在任何给定事件上用datetime范围进行更新。然后在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回购协议上提交。将根据那里的任何发展情况进行更新

来自上述代码笔的代码

HTML

<div id="calendar"></div>

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

});

---

FullCalendar项目的Adam Shaw指出，“无论何时渲染或重新渲染任何事件，都会重新渲染所有事件。您看到的是前景事件的闪烁重新渲染，导致真正的鼠标移出。当进行了优化时，这将得到修复。”

“无论何时触摸其任何事件，都会重新渲染日历”。据我所知，在悬停事件时不会发生完全重新渲染。“我在这里只是因为StackOverflow要求在共享codepen链接时出现代码”这是因为，根据StackOverflow.com/help/how-to-ask，问题本身中应该有足够的代码，以使问题重现。随着时间的推移，外部链接可能会改变、消失等。这个问题本身应该是有用的。这不仅仅是想惹你生气！演示是一个有用的额外功能，但您也可以在其中使用StackSnippet，因此，无论如何，您在鼠标事件中看到的行为并不是特别有帮助，我认为。也许值得向fullCalendar人员询问这是否是一个bug。同时，也许值得考虑的是，你想要的东西是否可以通过其他方式实现。是否可以始终显示此信息？不清楚为什么要在实际事件的正下方添加背景事件？你想达到什么目标？或者，它是否需要是鼠标事件？可以是点击事件吗？日历不会在鼠标上方重新呈现，不会；将新事件（后台事件）添加到日历时发生。这就是重新喷漆的时间。在我的实际用例中，我不想直接在悬停的事件下面画一个背景事件（尽管可能是这样），这只是一个人为的例子，使用FullCalendar提供的简单模板来报告bug。如果这是一个失败的原因，我可能需要走另一条路，而且很可能也会向fullCalendar的人报告。不过我想我应该先问一下可靠的人。