在 Fullcalendar v4 中切换月份时事件重复答案

【问题标题】：Events are duplicated when switching months in Fullcalendar v4在 Fullcalendar v4 中切换月份时事件重复
【发布时间】：2020-11-11 10:07:10
【问题描述】：

我正在使用这样的 Fullcalendar v4。事件已正确加载，但是当我手动添加一个新事件时（它也通过 ajax 调用保存到 SQL 数据库），然后我更改月份并返回，此事件被呈现两次。我不确定是什么原因造成的，因为当我再次更改月份时，事件仍然只是翻倍，而不是三倍。

我尝试将lazyLoading 或缓存设置为false，例如，在使用$('.fc-event').remove(); 渲染之前删除所有事件，但没有帮助。

var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
  defaultView: 'resourceTimeline30',
  views: {
    resourceTimeline30: {
      type: 'resourceTimeline',
      duration: { days: 30 }
    }
  },
  editable: false,
  selectable: true,
  resources: [ ... ],
  events: 'https://www.example.com/?fullcalendar=load',
  /*
  // did not help
  lazyLoading: true,
  events: {
    url: 'https://www.example.com/?fullcalendar=load',
    cache: false,
    extraParams: function() {
      return {
        cachebuster: new Date().valueOf()
      };
    }
  }
  */
});
calendar.render();

【问题讨论】：

它翻倍的事实可以归结为将数据放在服务器端源（每次月份更改时调用，以获取该月的新事件）和直接手动输入也是如此。我建议确保不要将手动添加的事件标记为持久事件。
是的，我也这么认为，但我不知道如何避免这种情况。您提到“不要将手动添加的事件标记为持久性”。我对此进行了谷歌搜索，但在 FC doc 中没有找到任何选项。你能多谈谈这个想法吗？就像我写的那样，我尝试使用$('.fc-event').remove(); 删除所有事件，但手动添加的事件仍然存在。
好的，这个功能在 fullCalendar 4 及更高版本中的实现略有不同。我想我的评论更针对旧版本，所以我道歉。所以请阅读fullcalendar.io/docs/Calendar-addEvent 并注意关于source 参数的cmets - 如果您a) 使用事件源并为您的事件源提供一个ID 或b) 只需将此值设置为true，然后您可以关联使用该源手动添加的事件，然后 fullCalendar 将确保下次从服务器获取事件时，它还将删除手动添加的副本
P.S. $('.fc-event').remove(); 无济于事，因为这只会删除用于在屏幕上显示事件的 DOM 元素。它不会从 fullCalendar 的内部事件列表中删除任何事件，因此它只会在下次呈现日历和/或事件时重新绘制所有事件。
好吧，如果我将true 作为第二个参数添加到addEvent()，控制台会给我一个错误There is no source with id "true"。但是，当我将 ID 添加到我的源并使用与 addEvent() 中的第二个参数相同的 ID 时，它似乎有效，事件不再加倍。非常感谢您的帮助，我很感激。

标签： javascript duplicates fullcalendar fullcalendar-4

【解决方案1】：

所以，如果有人需要，根据上面的 cmets，可行的解决方案是：

替换：

  events: 'https://www.example.com/?fullcalendar=load',

有

  eventSources: [{
    'id': 1,
    'url': 'https://www.example.com/?fullcalendar=load'
  }],

并使用该 ID 作为addEvent() 中的第二个参数

   calendar.addEvent(event, 1);

【讨论】：