Как добавить/удалить источник событий в Полном календаре на флажках?

Я пытаюсь добавить/удалить источники событий полного Календаря в зависимости от того, какой флажок

Это мой флажок и календарь.

<div class="x_content">
   <div class="row">
      {% for key,val in mydict.items %}
      <label class="checkbox-inline" style="margin: 5px;">
      <input class="email_id" type="checkbox" id="{{key}}" value = "{{key}}">{{key}}
      </label>
      {% endfor %}
   </div>
   <div class="clearfix"></div>
   <br>
   <div id="calendar"></div>
</div>

Это мой javascript, добавленный в html.

<script>

    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();
      var day = currentDate.getDate();
      var month = currentDate.getMonth() + 1;
      var year = currentDate.getFullYear();
      current_date = year + "-" + month + "-" + day;
      var 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(){
      $("input.email_id").click(function(){
        $("input.email_id:checked").each(function(){
          var temp = $(this).val();
          for(let i = 0;i<eventSourceName.length;i++){
            if(eventSourceName[i] === temp){
              $('#calender').fullCalendar('addEventSource',eventSourceData[i]);
            }
          }
        });
        
      });
    });


   
  </script>

У меня есть eventSourceName и соответствующие ему данные. Мой чекбокс имеет то же значение, что и eventSourcename. Поэтому если я нажимаю на флажок, то необходимо добавить соответствующие данные eventSourceData. Прочитав this, я добавил $('#calender').fullCalendar('addEventSource',eventSourceData[i]); , чтобы можно было добавить новый источник событий, но получил ошибку (index):3413 Uncaught TypeError: $(...).fullCalendar is not a function. Где я ошибаюсь?

Примечание - Когда я добавляю eventSourceData в eventSources, например eventSources:[eventSourceData[0],eventSourceData[1],eventSourceData[2]]. Я могу видеть все события в моем календаре.

Вернуться на верх