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

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或remove事件源。

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

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

然后在你的按钮功能

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

编辑：removing all sources：

如果未给出optionalSourcesArray，则将删除所有事件源。

所以使用这样的东西

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

Edit2 refetching根据documentation关于lazyFetching

设置为false时，日历将在切换视图时或任何当前日期更改时（例如，由于用户单击上一个/下一个）而获取事件。

首次启动日历时，需要将其设置为日历选项。

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

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

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