Fullcalendar changing the color of an event when mouseover another event

Question

What I'm trying to do is to change the color of an event when I put the mouse over another event. For example when I hover over event 58335 the color of 58345 to be changed from orange to blue.

Calendar

I'm using eventMouseover event - https://fullcalendar.io/docs/mouse/eventMouseover/ but cannot figure out how to access another event. I tracked the jsEvent hoping that I can find some reference to the other events but couldn't find any.

Any suggestions? Any help will be highly appreciated!

Answer 1

In order to access other events, you can use the "clientEvents" method, which can retrieve any or all of the events currently visible on the screen. It can be supplied with a filter to restrict the results to specific events according to your requirements. Then you can use the "updateEvent" method to tell the calendar to update that event with its new values.

Here's the eventMouseover function:

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

See http://jsfiddle.net/sbxpv25p/106/ for a working demonstration.

See https://fullcalendar.io/docs/event_data/clientEvents/ and https://fullcalendar.io/docs/event_data/updateEvent/ for more details of the fullCalendar methods used.

Presumably when you mouse out you want to change the colour back the original? If so then you can follow the same approach with the eventMouseOut callback.