如何替换完整日历库中的所有事件

Question

我正在使用 FullCalendar.io 库创建一个页面来显示网页上的事件。

现在，当用户在日期范围之间导航时，我想动态加载事件。使用文档，我可以在用户按下"下一步"按钮时添加新事件，但是它只是将事件附加到现有事件对象中，我想做的是删除任何现有事件并仅显示新列表。我该怎么做？

您可以在我的 CodePen 上查看该功能。

.HTML

  <p>
    <button id='prev'>prev</button>
    <button id='next'>next</button>
  </p>
<div id='calendar'></div>

.JS

var calendar;
var eventsList = [{
  id: '1',
  title: 'event 1',
  start: '2019-04-06'
},
                  {
                    id: '2',
                    title: 'event 2',
                    start: '2019-04-07'
                  },
                  {
                    id: '3',
                    title: 'event 3',
                    start: '2019-04-29'
                  },
                  {
                    id: '4',
                    title: 'event 4',
                    start: '2019-04-30'
                  }];
document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
    timeZone: 'UTC',
    defaultView: 'dayGridMonth',
    header: {
      left: '',
      center: 'title',
      right: ''
    },
    editable: true,
    events: eventsList
  });
  calendar.render(); 
});
document.getElementById('prev').addEventListener('click', function() {
  calendar.prev(); // call method
});
document.getElementById('next').addEventListener('click', function() {
  // replace existing list - this will doneby another function, hard coding for demo
  eventsList = [{
    id: '5',
    title: 'event 5',
    start: '2019-05-06'
  },
                {
                  id: '6',
                  title: 'event 6',
                  start: '2019-05-07'
                },
                {
                  id: '7',
                  title: 'event 7',
                  start: '2019-05-08'
                },
                {
                  id: '8',
                  title: 'event 7',
                  start: '2019-05-09'
                }];
  calendar.next(); // call method
  calendar.addEventSource(eventsList);
  //calendar.refetchEvents(); // using this instead of the line above does not work either, just loads original list
});

Answer 1

我误读了文档，getEventSource返回一个eventSource数组，所以只需点索引然后删除即可。

  calendar.getEventSources()[0].remove();

或者，如果您有多个资源，

  calendar.getEventSources().forEach(eventSource => {
    eventSource.remove()
  })

---

下面的代码是错误的，留作记录。

在添加事件源之前添加remove()怎么样。

  calendar.next(); // call method
  calendar.getEventSources().remove();
  calendar.addEventSource(eventsList);
  //calendar.refetchEvents(); // this does not work either, just loads original list

https://fullcalendar.io/docs/Calendar-getEventSourceshttps://fullcalendar.io/docs/EventSource-remove