FullCalendar 在 updateEvents 之后不重新渲染

Question

我的目标是让 2 个不同的 FullCalendar 元素保持同步。我现在没有做任何网络调用，只是客户端数组。

当我添加事件时（比如通过点击或在创建后立即添加），日历实际上并没有像文档中声称的那样重新呈现。

我也尝试过使用 "renderEvents" 和 "renderEvent" 风格，但这似乎没有必要，因为 "updateEvents" would/should 更新了这些事件的呈现。我也运行遇到的问题是日历列表版本上的 "renderEvent" 不显示我添加的事件，如果它不在该日历的运行ge 中。

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

现在，您有很多选择可以做到这一点。我给你写2个方法。

a.

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

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

b. 1) 将 events 参数更改为 function

$("#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/

FullCalendar 在 updateEvents 之后不重新渲染

FullCalendar Does not re-render after updateEvents

fullcalendar

fullcalendar-3