Javascript Fullcalendar重新蚀刻事件源

正如标题所说，我有一个关于完整日历中EventSource的问题

目前，我可以在fullcalendar中加载1个google日历。并且知道如何添加多个谷歌日历

但是，我想使用复选框（链接到他们自己的谷歌日历），我用谷歌日历ID动态创建一个数组，所有这些都可以，但我无法让日历“重新蚀刻”数组中谷歌日历上的所有事件

目前，这是我用来填充日历的代码：

document.addEventListener('DOMContentLoaded', function() {
var selected = [];
$('.badgebox:checked').each(function() {
    selected.push({
        'googleCalendarId' : $(this).val(),
        'className' : $(this).data('color')
    });
});
$('.badgebox').on('click', function() {
    if($(this).prop('checked')) {
        selected.push({
            'googleCalendarId' : $(this).val(),
            'className' : $(this).data('color')
        });
        $('#calendar').fullCalendar('refetchResources');
    }else{
        index = selected.findIndex(obj => obj.googleCalendarId === $(this).val());
        selected.splice(index, 1);
        $('#calendar').fullCalendar('refetchResources');
    }
});
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
    header: {
        center: 'dayGridMonth,timeGridWeek'
    },
    views: {
        dayGridMonth: {
            titleFormat: { year: 'numeric', month: '2-digit', day: '2-digit' }
        }
    },
    plugins: [ 'dayGrid', 'timeGrid', 'bootstrap', 'googleCalendar' ],
    googleCalendarApiKey: 'api key',
    eventSources: selected,
    eventClick: function(info) {
        info.jsEvent.preventDefault();
    },
    defaultView: 'timeGridWeek',
    weekNumbers: true,
    locale: 'nl',
    themeSystem: 'bootstrap',
    nowIndicator: true
});

calendar.render();

}))

但我得到的是一个错误：

TypeError: $(...).fullCalendar is not a function

我已经加载了所有需要的文件（并且可以看到它们已加载）

编辑当前代码

这是我现在使用的代码，但仍然不确定如何修复资源部分（刷新）：

---

有什么想法吗？

您添加和删除事件源的逻辑有缺陷-它将删除所有以前的源，但只添加当前选定的源（好吧，除非您从未清除

新闻源

，因此它会在一段时间后包含各种重复）。另一个问题是，当您编写

calendar.addEventSource（curSource）时您正在添加一个事件源数组（即使它只包含一个项），但添加它时将其视为单个事件源对象。因此，它不是fullCalendar所期望的格式，因此它不会添加任何内容

相反，您可以使用第一次声明日历时使用的相同逻辑，循环遍历所有当前选定的复选框，并将所有复选框设置为当前源。这是最简单的方法。只需将该逻辑移到函数中，就可以重用它。它还消除了包含源列表的全局对象的必要性。大概是这样的：

  function getEventSources() {
    var sources = [];
    $(".badgebox:checked").each(function() {
      sources.push({
        id: $(this).val(),
        'googleCalendarId' : $(this).val(),
        className: $(this).data("color")
      });
    });
    return sources;
  }

  $(".badgebox").on("change", function() {
    //remove event sources
    calendar.getEventSources().forEach(eventSource => {
      eventSource.remove();
    });
    //get currently selected sources
    var sources = getEventSources();

    //add each new source to the calendar
    sources.forEach(eventSource => {
      calendar.addEventSource(eventSource);
    });
  });

然后在日历配置中，通过调用函数设置初始事件源：

eventSources: getEventSources(),

并按如下方式处理复选框上的“更改”事件：

  function getEventSources() {
    var sources = [];
    $(".badgebox:checked").each(function() {
      sources.push({
        id: $(this).val(),
        'googleCalendarId' : $(this).val(),
        className: $(this).data("color")
      });
    });
    return sources;
  }

  $(".badgebox").on("change", function() {
    //remove event sources
    calendar.getEventSources().forEach(eventSource => {
      eventSource.remove();
    });
    //get currently selected sources
    var sources = getEventSources();

    //add each new source to the calendar
    sources.forEach(eventSource => {
      calendar.addEventSource(eventSource);
    });
  });

我在这里做了一个现场演示：。显然，我无法在演示中使用谷歌日历，因此我使用了硬编码的事件列表，但整个过程的逻辑是相同的。
您添加和删除事件源的逻辑有缺陷-它将删除所有以前的源，但只添加当前选定的源（好吧，除了你永远不会清除
newSource
，所以过一段时间它会包含各种重复）。另一个问题是，当你写
calendar.addEventSource（curSource）；
时，你正在添加一个事件源数组（即使它只包含一个项目）但是添加它就像添加单个事件源对象一样，因此它不是fullCalendar所期望的格式，因此它不添加任何内容

相反，您可以使用第一次声明日历时使用的相同逻辑，循环遍历所有当前选定的复选框，并将所有复选框设置为当前源。这是最简单的方法。只需将该逻辑移动到函数中，即可重复使用。这也消除了包含列表的全局对象的必要性来源。类似这样的：

  function getEventSources() {
    var sources = [];
    $(".badgebox:checked").each(function() {
      sources.push({
        id: $(this).val(),
        'googleCalendarId' : $(this).val(),
        className: $(this).data("color")
      });
    });
    return sources;
  }

  $(".badgebox").on("change", function() {
    //remove event sources
    calendar.getEventSources().forEach(eventSource => {
      eventSource.remove();
    });
    //get currently selected sources
    var sources = getEventSources();

    //add each new source to the calendar
    sources.forEach(eventSource => {
      calendar.addEventSource(eventSource);
    });
  });

然后在日历配置中，通过调用函数设置初始事件源：

eventSources: getEventSources(),

并按如下方式处理复选框上的“更改”事件：

  function getEventSources() {
    var sources = [];
    $(".badgebox:checked").each(function() {
      sources.push({
        id: $(this).val(),
        'googleCalendarId' : $(this).val(),
        className: $(this).data("color")
      });
    });
    return sources;
  }

  $(".badgebox").on("change", function() {
    //remove event sources
    calendar.getEventSources().forEach(eventSource => {
      eventSource.remove();
    });
    //get currently selected sources
    var sources = getEventSources();

    //add each new source to the calendar
    sources.forEach(eventSource => {
      calendar.addEventSource(eventSource);
    });
  });

我在这里做了一个现场演示：。我显然无法使用谷歌日历进行演示，所以我使用了硬编码的事件列表，但整个过程的逻辑是相同的。
$（…）.fullCalendar
是fullCalendar版本3中基于jQuery的语法。请查看您自己的代码…您是如何创建日历的？当然不是使用jQuery。您是使用
calendar=new fullCalendar.calendar
…创建日历的，
calendar
变量作为返回值，表示日历对象。如果如果要对日历执行任何操作，请从该对象调用该方法。文档中以及您自己的代码（例如，
calendar.render（）
…）中都有许多这样的示例。一旦解决了这个问题，您会发现代码仍然没有达到预期效果，因为1）您没有使用资源（因此“refetchResources”）不是您需要的），并且2）您实际上没有更改日历中的任何事件源。当您编写
eventSources:selected
时，它会将
selected
的内容按当时的状态传递，并将其复制到fullCalendar中。它不维护对原始变量的引用。修改所选的
不会更新fullCalendar。如果您想更改日历中加载的事件源（在首次初始化之后），您需要使用此处列出的方法：（在底部的“方法”下）@ADyson，感谢您的反馈。我已经更新了我的代码（我目前使用的），因为我无法让刷新正常工作。变量“curSource”已更新（可以在console.log中看到），但日历没有使用新的源刷新（或者如果没有可用的资源，则保持为空）。我想您可能忘记考虑我说过refetchResources（）不是您需要的函数的备注…：-）<代码>$（…）.fullCalendar

是fullCalendar版本3中基于jQuery的语法。看看你自己的代码…你是如何创建日历的？当然不是通过使用jQuery。您使用

calendar=new FullCalendar.calendar

…创建了它，并将

calendar

变量作为返回值，表示日历对象。因此，如果您想对日历执行任何操作，那么可以从该对象调用该方法。文档中以及您自己的代码（例如，

calendar.render（）

…）中都有很多这样的例子。一旦修复了这个问题，您会发现代码仍然没有达到预期效果，因为1）您没有使用资源（所以“refetchResources”不是您需要的），2）您实际上没有更改日历中的任何事件源。当您编写

eventSources:selected

时，它会传递内容