Question

https://fullcalendar.io

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

如果您查看this codepen，请打开DevTools并在将鼠标移到/移出任何日历事件时观察控制台。如果你在一个事件中来回移动你的鼠标，你会看到一遍又一遍地反复发射过度/结束事件。

我希望发生的是使用任何给定事件的日期时间范围更新的backgroundEvent（例如以下内容）。然后在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 repo上提交an issue。将根据那里的任何进展进行更新。

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

});

Answer 1

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

FullCalendar，在eventMouseover / eventMouseout

1 个答案: