完整日历 V4 重新加载事件。removeEventSource 不存在

Question

我正在尝试在我的网站上添加一个日历，但我不知道如何从 ajax 源重新加载事件。在以前的版本中，您可以删除事件源，添加新事件源并重新绘制日历，但在此版本中，我在文档中读到它只有addEventSource事件。

如果存在，我有一个不好的解决方案，在绘制日历之前删除日历，但我丢失了显示的视图和日期。不是一个好的解决方案。

这是我的代码：

var calendar;
var startDateSelected;  //YYY-MM-DD
var endDateSelected;    //YYY-MM-DD
var evTittleSelected;
//Example data
function getCalendarEvents() {
return [{
title: 'example1',
start: '2019-07-15 12:00:00'
}, {
title: 'Example2',
start: '2019-07-06 12:00:00',
end: '2019-07-10 18:00:00'
}];
}
document.addEventListener('DOMContentLoaded', function () {
drawCalendar();
});
function drawCalendar() {
var events = getCalendarEvents();
var calendarEl = document.getElementById('calendar');
if(calendar != undefined) calendar.destroy();
calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid'],
locale: 'es',
selectable: true,
editable: true,
header: {
left: 'prevYear,prev,next,nextYear today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
select: function (info) {
startDateSelected = moment(info.startStr).format("DD-MM-YYYY HH:mm:ss");
endDateSelected = moment(info.endStr).format("DD-MM-YYYY HH:mm:ss");
alert('de ' + startDateSelected + ' a ' + endDateSelected);
},
eventClick: function(info) {
evTittleSelected = info.event.title;
startDateSelected =  moment(info.event.start).format("DD-MM-YYYY HH:mm:ss");
endDateSelected =  moment(info.event.end).format("DD-MM-YYYY HH:mm:ss");
alert('de ' + startDateSelected + ' a ' + endDateSelected);
},
events: events
});
calendar.render();
}

我尝试像这样更改事件源：

calendar.destroy();
calendar.addEventSource( events );
calendar.refetchEvents();
calendar.render();

但是如果没有removeEventSource方法，它只会向日历添加新事件。

那么有什么方法可以重新加载事件吗？

新内容暗示答案(并在评论中使用解决方案)：

我尝试按照以下任一方式实现事件提要 fullcalendar.io/docs/events-json-feed 或 fullcalendar.io/docs/events-function

当我直接从 ajax 调用接收的事件放入我的 nodejs 服务器时，它会完美加载所有这些事件(没有重新加载的好选项)。所以我的事件对象的格式似乎还可以。

我使用这个 ajax 请求

jQuery.ajax({
type: 'POST',
url: '/calendar/getCalendarEvents',
data: {
token: localStorage.token
},
}).then(function success(events) {
return events;
}, function error(err) {
console.log(err);
})

以这种格式填充事件

events:  [{ 
id: 1,
title: 'others',
start: '2019-07-12 00:00:00',
end: '2019-07-15 00:00:00',
color: '#a6a6a6' 
}, { 
id: 2,
title: 'any',
start: '2019-07-12 00:00:00',
end: '2019-07-15 00:00:00',
color: '#4222C3'
}]

当我尝试使用该events-function时，我遇到了错误：callback is not a function error

events: function(start, end, timezone, callback) {
jQuery.ajax({
type: 'POST',
url: '/calendar/getCalendarEvents',
data: {
token: localStorage.token
},
success: function(events) {
callback(events);
}
});
}   

使用 metod events-json-feed，我Failure parsing JSON错误，但格式与第一种方法相同(有效)。

events: "/calendar/main/?token=" + localStorage.token

那我能做错什么呢？

Answer 1

正如@ADyson评论所说，这适用于此解决方案：

var eventSources = calendar.getEventSources();
eventSources[0].remove();
calendar.addEventSource(events);
calendar.refetchEvents();

这个想法是知道eventSources是一个数组

但使用这些方法可能会更好： fullcalendar.io/docs/events-json-feed 或 fullcalendar.io/docs/events-function

events: function(fetchInfo, successCallback, failureCallback) {
jQuery.ajax({
type: 'POST',
url: '/calendar/getCalendarEvents',
data: {
token: localStorage.token
},
success: function(events) {
successCallback(events);
}
});
}

重新加载事件：calendar.refetchEvents();