从日历中删除所有事件

Question

我正在尝试从日历中删除所有活动。我使用完整的日历库 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');

但是 return 我的第一个错误...

我的问题是：如何从日历中删除所有活动？？也许我很困惑，我会以另一种形式来做，但我不知道。

我忘记了我的框架，它是 Laravel 5.8

感谢您的所有帮助和回复。我是来学习的

Answer 1

你试过这个方法了吗

var listEvent = calendar.getEvents();
   listEvent.forEach(event => { 
   event.remove()
});

从日历中删除所有事件

remove all events from calendar

javascript

jquery

fullcalendar

laravel