Fullcalendar refetch eventsource

Question

As the title says, I have a question regarding EventSource in the fullcalendar.

At the moment I can load 1 google calendar in the fullcalendar. And know how to add multiple google calendars.

However, I want to use checkboxes (linked to their own google calendar), I dynamically create an array with the googleCalendarIds, all this works, but I can't get the calendar to "refetch" all the event from the google calendars in the array.

At the moment, this is the code I use to populate the calendar:

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();

});

But what I am getting is an error:

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

I have loaded all the files needed (and can see they are loaded).

Edit current code

This is the code I use now, but still not sure how to fix the resources part (refreshing):

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

Any idea?

Answer 1

Your logic for adding and removing event sources is flawed - it'll remove all the previous sources, but only ever add the currently selected one (well, except that you never clear newSource so it'll contain all sorts of duplication after a while). The other problem is that when you write calendar.addEventSource(curSource); you're adding an array of event sources (even though it only ever contains one item) but adding it as if it was a single event source object. Therefore it's not in the format fullCalendar expects, so it doesn't add anything.

Instead you can just use the same logic you use when you first declare the calendar, to loop through all the currently selected checkboxes and set all of them as the current sources. This is the simplest way to do it. Just move that logic into a function so you can re-use it. It also removes the necessity for global objects containing the list of sources. Something like this:

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

Then in the calendar config, set the initial event sources by calling the function:

eventSources: getEventSources(),

And handle the "change" event on the checkboxes like this:

  $(".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);
    });
  });

I made a live demo here: https://codepen.io/ADyson82/pen/Jjoovym. I couldn't use google calendars for the demo obviously so I've done it with hard-coded lists of events, but the overall logic of the process is identical.