FullCalendar, modify calendar on eventMouseover/eventMouseout

问题

https://fullcalendar.io

I have a need to render a background event when mousing over calendar events. Each calendar event has a datetime range associated with it that I would like to display on the calendar when the user hovers the mouse over it (and subsequently remove the background event from the calendar on eventMouseout). However, I've ran into an issue where the eventMouseover and eventMouseout events are triggered multiple times over and over when attempting to modify the fullCalendar on mouse enter/leave. I imagine this has something to do with the calendar being re-rendered when ~~any of its events are touched~~ adding/removing events to the calendar.

If you take a look at this codepen, open up DevTools and watch the console as you move your mouse over/out of any of the calendar events. If you move your mouse back and forth within an event you'll see the over/out events firing back to back, over and over.

What I'd like to have happen is a backgroundEvent (such as the following) to be updated with the datetime range on any given event. Then on mouseout, remove the backgroundEvent from the calendar.

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

Instead what happens is the eventMouseover fires, renders the event, followed by the eventMouseout, which immediately removes the event.

EDIT 1:

I'm in the middle of creating a scheduling app, and the calendar events essentially represent individual tasks belonging to a greater "appointment" object. Thus, when hovering over an individual "task" I desire to display its associated "appointment" range on the calendar to assist the user in deciding whether that task can be moved to a different date/time or not.

EDIT 2:

Submitted an issue on FullCalendar's github repo. Will update with any developments from there.

CODE FROM THE ABOVE 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'
      }
    ]
  });

});

回答1:

Adam Shaw from the FullCalendar project comments that "whenever any events are rendered or rerendered, ALL events are rerendered. What you are seeing is a flash rerender of the foreground event causing a real mouseout. When #3003's optimization is made, this will be fixed."

来源：https://stackoverflow.com/questions/47147834/fullcalendar-modify-calendar-on-eventmouseover-eventmouseout

标签

fullcalendar