如何通过复选框增减FullCalendar的event source？报错fullCalendar不是函数怎么解决

核心问题原因 #

• API版本不兼容：你当前使用的是FullCalendar v4及更高版本，采用原生JS new FullCalendar.Calendar() 方式初始化，而你参考的$('#calender').fullCalendar()是v3及更早的jQuery封装版专属语法，两者API不互通，因此抛出is not a function错误。
• 作用域问题：calendar实例定义在DOMContentLoaded回调内部，属于局部变量，外部的复选框点击事件无法访问到该实例。
• ID拼写错误：日历容器的ID是calendar，你在选择器中误写为calender，拼写错误导致无法定位到目标元素。
• 逻辑缺陷：当前代码仅会新增事件源，取消勾选时不会移除对应事件源，多次勾选会导致事件重复渲染。

修正后的完整JS代码 #

// 提前在全局作用域声明calendar变量，供外部事件访问
var calendar;
var eventSourceName = new Array();
var eventSourceData = new Array();
var i = 0;

{% for key,val in mydict.items %}
eventSourceName[i] = "{{key}}";
eventSourceData[i] = [
{% for dt in val %}
{
  "title": "{{dt.title}}",
  "start": "{{dt.start}}",
  "end": "{{dt.end}}",
  "id": "{{dt.id}}",
  "color": "{{dt.color}}",
},
{% endfor %}
];
i = i+1;
{% endfor %}

document.addEventListener('DOMContentLoaded', function () {
  var calendarEl = document.getElementById('calendar');
  var currentDate = new Date();
  // 把实例赋值给全局calendar变量
  calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    initialDate: currentDate,
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    editable: true,
    slotMinTime: "07:00:00",
    slotMaxTime: "20:00:00",
    eventSources:[]
  });
  calendar.render();
});

jQuery(function(){
  // 改用change事件更符合复选框交互逻辑
  $("input.email_id").change(function(){
    // 先清空所有事件源，避免取消勾选后事件残留、重复渲染
    calendar.removeAllEventSources();
    // 遍历所有勾选的复选框，添加对应事件源
    $("input.email_id:checked").each(function(){
      var temp = $(this).val();
      for(let i = 0;i<eventSourceName.length;i++){
        if(eventSourceName[i] === temp){
          // 用全局calendar实例调用v4+版本的官方addEventSource方法
          calendar.addEventSource(eventSourceData[i]);
        }
      }
    });
  });
});

内容的提问来源于stack exchange，提问作者anonymous