重新呈现 fullcalendar.io 删除所有事件

Question

我不确定如何处理 fullcalender.io。因为我要刷新日历，所以我想 return 像这样的日历对象。

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

我这样做是因为我需要刷新 bootstrap 模态中的所有事件。当显示模态时，我记得这个功能。

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

这里 globalEvents 是一个包含所有事件的数组。我最初是这样渲染日历的

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

问题是日历呈现但它没有任何事件，而如果我只呈现日历，它会保留所有事件。我查看了他们的文档，他们在不同版本中具有不同的功能。有任何想法吗？请问？

Answer 1

您可以执行如下操作，只需删除旧事件附加新事件并重新渲染事件

下面是一些可以帮助您的 API

//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' );

这里正在工作example

Answer 2

所以基本上是根据 v4 指南。

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

这就是您必须删除事件并呈现新事件的方式。这里 globalEvents 只是我用来跟踪刷新事件的数组。

重新呈现 fullcalendar.io 删除所有事件

rerender on fullcalendar.io removeing all events

javascript

jquery

fullcalendar