开发者问题收集

从日历中删除所有事件

2021-03-04
1347

我试图从我的日历中删除所有事件。我使用的是完整日历库 v4。日历呈现后,所有事件都通过 ajax 添加到日历中。

在我的脚本中,我有此代码用于创建一个空日历:

var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    themeSystem: 'bootstrap4',
    headerToolbar: {
        left: 'prev next today',
        center: 'title',
        right: 'dayGridDay dayGridWeek dayGridMonth listMonth'
    },
    locale: config.lang,
    initialView: 'dayGridMonth',
    displayEventTime: true,

    events: dbEvents,

    eventClick: function(event, jsEvent, view) {
      $('#alertNotify').html(alert[event]);
        
        $('#alertNotify').notifyModal({
            duration : -1,
            placement : 'center',
            type : alert['type'],
            icon : true,
            onLoad : function(el) {},
            onClose : function(el) {}
        });
    },
    
  }); // end calendar object

然后我使用此函数加载来自某个日期的所有事件:

function loadEvents(){

var url = new URL(window.location.href);
var day = url.searchParams.get("day");
var month = url.searchParams.get("month");
var year = url.searchParams.get("year");

console.log(day + "/" + month + "/" + year);

$.ajax({
    url     : 'loadEvents',
    type    : 'get',
    dataType: 'json',
    data    : 'json',
    success : function(data) {    
      dbEvents = data;
      calendar.addEventSource(dbEvents); // add events with ajax data from array;
      dbEvents = [];
    },
    failure: function() {
      alert('there was an error while fetching events!');
    },
    color: 'red',   // a non-ajax option
    textColor: 'white', // a non-ajax option
});
}

我正在使用 dbEvents,它是一个用于从日期加载事件的数组。

现在我不使用从日期加载事件,因为我想删除之前的所有事件。为什么我要删除所有事件?我的意思是,我正在使用 ajax 加载所有事件,但如果我移动到下个月或第二天,我只想加载属于日期的事件。在我的控制器中,我将使用此日期进行查询。为什么我要这样做?为了不让我的网站超载。我认为在添加新闻事件之前,我应该先删除所有事件。实际上,我在网站上看到我可以使用这个:

$("#calendar").fullCalendar('removeEvents');

但我的控制台出现此错误:

$(...).fullCalendar is not a function
        at calendarDate (calendarEvents.js:110)
        at HTMLButtonElement.<anonymous> (calendarEvents.js:53)
        at HTMLButtonElement.dispatch (jquery.min.js:2)
        at HTMLButtonElement.v.handle (jquery.min.js:2)

另外,我读到我可以使用它:

calendar.remove();

但删除时出现此错误:

Uncaught TypeError: Cannot read property 'remove' of null

我还读到我可以使用它:

calendar.fullCalendar('removeEvents');

但返回我的第一个错误...

我的问题是:如何从日历中删除所有事件??也许我搞糊涂了,我会用另一种形式来做这件事,但我不知道。

我忘了我的框架是 Laravel 5.8

我感谢你们所有的帮助和回复。我来这里是为了学习

2个回答

如果有人需要 v5 中有一个函数 calendar.removeAllEvents()。

Alexander Kolinko
2022-08-11

您已经尝试过这种方法了吗

var listEvent = calendar.getEvents();
   listEvent.forEach(event => { 
   event.remove()
});
Hudson Moreira da Cunha
2021-03-04