如何在完整日历中使用新加载的事件覆盖或删除以前的事件

Question

On fullcalendar init, I have : 

$("#m_supervisor_calendar").fullCalendar({      
      events: function (start, end, timezome, callback) {
        $.ajax({
            url: '/calendarSchedule/getCalendarData',
            dataType: 'json',
            success: function (events) {
                callback(events)
            }
        })
},

但我需要 button 单击才能更改事件源并删除以前的事件。一开始它在工作，即它正在清除以前的事件并显示新呈现的事件，但是当我单击 prev next 月按钮时。它显示所有事件，即上一个事件和新事件。

$('button').on('click', function(){

    $.ajax({
        url: ''fetch/calendarByVolunteer',
        dataType: 'json',
        success: function (events) {
            $("#m_supervisor_calendar").fullCalendar('removeEvents');
            $("#m_supervisor_calendar").fullCalendar('addEventSource', response);
            $("#m_supervisor_calendar").fullCalendar('rerenderEvents', response);
        }
   })

})

所以我想要的是完全删除以前的事件。

Answer 1

我建议不要自己获取事件，而是使用事件源。阅读 here 关于事件来源的 JSON 提要。

然后 fullcalendar 可以选择动态 add or remove 事件源。

在您的函数中，您可以删除源并将另一个源添加到日历

$("#m_supervisor_calendar").fullCalendar({
  eventSources: [
{
 id: 'mySource'
 url: 'fetch/calendarByVolunteer',
}
]
});

然后在你的按钮函数中

$('button').on('click', function(){
 $("#m_supervisor_calendar").fullCalendar( ‘removeEventSource’, 'mySource' )
});

编辑： removing all sources:

If optionalSourcesArray is not given, all event sources will be removed.

所以使用这样的东西

$("#m_supervisor_calendar").fullCalendar( ‘removeEventSource’)

Edit2 重新获取根据documentation关于lazyFetching

When set to false, the calendar will fetch events any time the view is switched, or any time the current date changes (for example, as a result of the user clicking prev/next).

您需要在首次初始化日历时将其设置为日历选项。

$('#calendar').fullCalendar({
eventSources: [ 
{
 id: 'mySource'
 url: 'fetch/calendarByVolunteer',
}
],
lazyFetching: false, 
});

现在，每次您导航或更改视图时，都会调用您的 eventSource，并且开始和结束变量将作为 get 参数传递给它。例如，如果您的 eventSource 是 myfeed.php 并且日历应该显示从 2019-12-01 开始到 2019-12-5 结束的事件，则 fullcalendar 将发出如下所示的获取请求：

/myfeed.php?start=2019-12-01&end=2019-12-05

如何在完整日历中使用新加载的事件覆盖或删除以前的事件

How can I override or remove previous events with new loaded events in full calendar

javascript

fullcalendar