Fullcalendar 在鼠标悬停在另一个事件上时更改事件的颜色

Question

我想做的是当我将鼠标放在另一个事件上时更改事件的颜色。例如，当我将鼠标悬停在事件 58335 上时，58345 的颜色将从橙色变为蓝色。

Calendar

我正在使用 eventMouseover 事件 - https://fullcalendar.io/docs/mouse/eventMouseover/ 但不知道如何访问另一个事件。我跟踪了 jsEvent，希望能找到对其他事件的一些参考，但找不到。

有什么建议吗？任何帮助将不胜感激！

Answer 1

为了访问其他事件，您可以使用 "clientEvents" 方法，该方法可以检索屏幕上当前可见的任何或所有事件。它可以提供一个过滤器，以根据您的要求将结果限制为特定事件。然后您可以使用 "updateEvent" 方法告诉日历用新值更新该事件。

这是 eventMouseover 函数：

eventMouseover: function(event, jsEvent, view) {
  if (event.id == 58335) {
    var targetEvents = $("#calendar").fullCalendar("clientEvents", 58345); //restrict to event(s) with the ID specified in the second argument
    targetEvents[0].backgroundColor = "blue";
    $("#calendar").fullCalendar("updateEvent", targetEvents[0]);
  }
}

有关工作演示，请参阅 http://jsfiddle.net/sbxpv25p/106/。

有关使用的 fullCalendar 方法的更多详细信息，请参阅 https://fullcalendar.io/docs/event_data/clientEvents/ and https://fullcalendar.io/docs/event_data/updateEvent/。

想必当你鼠标移开时你想把颜色改回原来的颜色？如果是这样，那么您可以对 eventMouseOut 回调采用相同的方法。

Fullcalendar 在鼠标悬停在另一个事件上时更改事件的颜色

Fullcalendar changing the color of an event when mouseover another event

javascript

fullcalendar

fullcalendar-scheduler