перерисовать на fullcalendar.io, удалив все события

Question

Я не уверен, как подойти к fullcalender.io. Поскольку я буду обновлять календарь, я подумал, что верну объект календаря следующим образом.

var calendar = function (eventsObj) {
    console.log(eventsObj);
    return new FullCalendar.Calendar(document.getElementById("calendar"), {
        plugins: ['interaction', 'dayGrid', 'timeGrid'],
        defaultView: 'dayGridMonth',
        defaultDate: new Date().getDate(),
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        events: eventsObj
    });
}

Я сделал это так, потому что мне нужно обновить sh все мои события внутри bootstrap модального , Когда отображается Modal, я вспоминаю эту функцию.

 $("#assignModal").on("shown.bs.modal", function () {
            calendar(globalEvents).rerenderEvents();

Здесь globalEvents - это массив со всеми событиями. Я изначально отображаю календарь следующим образом:

window.onload = function () {
    calendar(globalEvents).render();
};

Проблема в том, что календарь отображается, но у него нет событий, тогда как если я просто отображаю календарь, он сохраняет все события. Я проверил их документы, они имеют разные функции в разных версиях. Любые идеи? пожалуйста

Answer 1

То есть, в основном, в соответствии с руководствами v4.

calendar.getEventSources().forEach(function (item) {
                item.remove();
            });
            calendar.addEventSource(globalEvents);

Так вы должны удалить события и отобразить новые. Здесь globalEvents - это просто массив, который я использую для отслеживания моих обновленных событий.

Answer 2

вы можете сделать что-то, как показано ниже: просто удалите старые события, присоедините новые события и повторно отправьте их

ниже приведен некий APIS, который поможет вам

//remove old data
$('#fullCalendar').fullCalendar('removeEvents');

//Getting new event json data
$("#fullCalendar").fullCalendar('addEventSource', response);

//Updating new events
$('#fullCalendar').fullCalendar('rerenderEvents');

//getting latest Events
$('#fullCalendar').fullCalendar( 'refetchEvents' );

//getting latest Resources
$('#fullCalendar').fullCalendar( 'refetchResources' );

здесь работает пример