Fullcalendar V4 重新加载事件。 removeEventSource 不存在

Question

我正在尝试在我的网站上添加日历，但我不知道如何从 ajax 源重新加载事件。在以前的版本中，您可以删除事件源，添加 nwe 并重新绘制日历，但在这个版本中，我在文档中读到它只有 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 方法，它只会将新事件添加到日历中。

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

新内容 提出答案（并在评论中使用解决方案）：

我尝试按照任一方式实施事件提要全日历。io/docs/events-json-feed 或全日历.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事件-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();

Fullcalendar V4 重新加载事件。 removeEventSource 不存在

Fullcalendar V4 reload events. removeEventSource doesn't exist

fullcalendar

fullcalendar-4