Specify data for Fullcalendar's eventSources

Question

I am using the jQuery Fullcalendar plugin. On the same page, I have a form with checkboxes which are used to filter the event data fetched from the server. The idea is that I want to pass those form values into the eventSources object, so that they get transmitted to the server together with the start/end timestamps.

The docs have a sample eventSources object like this:

$('#calendar').fullCalendar({
   eventSources: [
     // your event source
      {
        url: '/myfeed',
        type: 'POST',
        data: {
          custom_param1: 'something',
          custom_param2: 'somethingelse'
        },
      }
      // other sources...
   ]
});

Which I modified to:

   eventSources: [
   {
     // ...as above
     data: getFormAsObject(),
     // as above...
   }

I want the form's values to get passed into the the data object. In the getFormAsObject() function, I serialize the form and convert that to an associative array.

All that is left is to hijack the form submission. So if the "submit" button is clicked, I cancel the default POST action, and call

calendar.fullCalendar("refetchEvents");

BUT, this doesn't work, and the getFormAsObject() doesn't get called at all. What am I doing wrong?

Answer 1

Problem is (it seems) that Fullcalendar only reads that data object once. So it reads it the first time and then not again, even if I set it to a function. I'm not certain, but I think it may be how the underlying ajax() call works?

So I've changed it to remove the eventSources and then readd new ones every time I do an update. Seems ugly, but works.

Answer 2

Use the "Dynamic data parameter" Second last option here: https://fullcalendar.io/docs/events-json-feed

$('#calendar').fullCalendar({

  events: {
    url: '/myfeed.php',
    data: function() { // a function that returns an object
      return {
        dynamic_value: Math.random()
      };
    }
  }

});