在updateEvents之后，FullCalendar不会重新呈现

Question

我的目标是有两个不同的FullCalendar元素保持同步。我不做任何网络调用，在这一点上只是客户端数组。

当我添加一个事件时（比如通过点击或者在它构建之后），日历实际上不会像文档所说的那样重新呈现。

我还尝试使用“renderEvents”和“renderEvent”风格，但这似乎没有必要，因为“updateEvents”将/应该更新这些事件的呈现。我还遇到了一个问题，日历列表版本上的“renderEvent”不显示我要添加的事件，如果它超出了该日历的范围。

const events = [{
    title: 'All Day Event',
    start: TODAY
  },
  {
    title: 'Long Event',
    start: TODAY,
    end: NEXTDAY
  }
]

$("#calendar").fullCalendar({
  header: {
    left: '',
    center: 'title',
    right: ''
  },
  events
})

$("#events").fullCalendar({
  header: {
    left: '',
    center: 'title',
    right: ''
  },
  defaultView: 'listMonth',
  events
})

// Now add a new one
events.push([{
  title: 'Event added',
  start: YESTERDAY
}])

$('#calendar').fullCalendar('updateEvents', events)
$('#events').fullCalendar('updateEvents', events)

以下是对该问题的重新解释：

https://jsfiddle.net/Kikketer/7d92utp5/

用例非常简单：向事件列表中添加一个新事件，在日历上呈现事件。

Answer 1

首先将您的推送事件从数组更改为对象。

events.push({
   title: 'Event added',
   start: YESTERDAY
});

现在，你有很多选择。我会为你写两种方式。

A.

$('#calendar').fullCalendar( 'removeEvents');
$('#calendar').fullCalendar('addEventSource', events);

https://jsfiddle.net/7d92utp5/49/

b、 1）将事件参数更改为函数

$("#calendar").fullCalendar({
  header: {
    left: '',
    center: 'title',
    right: ''
  },
  // at here
  events: function (start, end, timezone, callback) {
    callback(events);
  }
});

2）使用refetchEvents而不是updateEvents

$('#calendar').fullCalendar('refetchEvents');

https://jsfiddle.net/7d92utp5/53/