FullCalendar，修改eventMouseover / eventMouseout上的日历 [英] FullCalendar, modify calendar on eventMouseover/eventMouseout

问题描述

每当任何事件被渲染或重新渲染，所有事件都会被重新渲染，你所看到的是一个闪光重新渲染前景事件，导致真正的鼠标移动。当＃3003 进行优化时，这将是固定的。

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

});

解决方案

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."

这篇关于FullCalendar，修改eventMouseover / eventMouseout上的日历的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！