Full calendar resource extra params not added

Question

I try to customize the params that send with the events and resources on the fullCalendar library.

I use full calendar version 3.

I can fetch these custom params from a form and assign them to events request.

But the issue is with resources that I use the same code for both but the requested URL for resource breaks and also lost the default start and end prams as well.

The code that I tried:

resources: {
  // Resource route to load Instructors.
  url: resourcesCallback,
  method: 'GET',
  data: function() {
    var fields = jQuery('.calendar_filter_form').serializeArray();
    var datas = {};
    jQuery.each(fields, function(index, val) {
       /* iterate through array or object */
       datas[val.name] = val.value;
    });
    return datas;
  },
  failure: function() {
    alert('There was an error while fetching instructors!');
  },
}, 

and the event part:

events: {
  // Resource route to load Instractors.
  url: eventsCallback,
  method: 'GET',
  data: function() {
    var fields = jQuery('.calendar_filter_form').serializeArray();
    var data = {};
    jQuery.each(fields, function(index, val) {
       /* iterate through array or object */
       data[val.name] = val.value;
    });
    return data;
  },
  failure: function() {
    alert('there was an error while fetching events!');
  },
}

The generated URL that I get are these:

For events:

Request URL: DOMAIN/load?instractor=&lessonType=&date=&start=2019-07-22T00%3A00%3A00&end=2019-07-23T00%3A00%3A00&_=156377682

For resources:

Request URL: DOMAIN/resources?_=1563776826863

I need to generate the second URL like the first, as you see the code is same but result is different, what is wrong?

The full code if needed:

  $('#calendar').fullCalendar({
    defaultView: 'agendaDay',
    // Active the ajax reload the resources(instructors).
    refetchResourcesOnNavigate: true, 
    // To make the time slot divided in 15mis.
    slotDuration: "00:15:00",
    displayEventTime : false,
    // This define each time slot can get how many part
    // of the rows, for example if we set it to "00:01:00"
    // then it will divide each row by 15 mins but just show
    // the one between one like: 00:15:00 , 00:45:00 , 01:15:00.
    slotLabelInterval: "00:01:00",
    slotLabelFormat: ['H:mm'],
    groupByResource: true,
    // To trun of the all day row at the top of calendar.
    allDaySlot: false,
    groupByDateAndResource: true,
    // Settings for manage the calendar header options.
    header: {
      left: 'prev, today, next',
      center: 'title',
      right: null,
    },
    eventRender: function (event, $element) {
      // Render the Main content of the events with more details
      // and with html tags to be more user friendly.
      $element.find('.fc-title').html('<p style="text-align:center">'
        + event.lessonType + ' ~ ' + event.student
        + '<br>' + event.description
        + '<br>' + event.lessonAvailable + '~' + event.nextEvent + '</p>'
      );
    },
    // Define the Calendar column name.
    // This part should be dynamic and will 
    // define by instructor names.
    resources: {
      // Resource route to load Instructors.
      url: resourcesCallback,
      method: 'GET',
      data: function() {
        var fields = jQuery('.calendar_filter_form').serializeArray();
        var data = {};
        jQuery.each(fields, function(index, val) {
           /* iterate through array or object */
           data[val.name] = val.value;
        });
        return data;
      },
      failure: function() {
        alert('There was an error while fetching instructors!');
      },
    },
    // The main part of getting data and manipulate them
    // to show those in proper format in the calendar.
    // To match with resources here the resourceId should match
    // with the ids that provided in the resources.
    // Also to get proper location according to time slot
    // it need the correct start and end params that should
    // be in correct date format like: 2019-07-18T19:30:00.
    events: {
      // Resource route to load instructors.
      url: eventsCallback,
      method: 'GET',
      data: function() {
        var fields = jQuery('.calendar_filter_form').serializeArray();
        var datas = {};
        jQuery.each(fields, function(index, val) {
           /* iterate through array or object */
           datas[val.name] = val.value;
        });
        return datas;
      },
      failure: function() {
        alert('there was an error while fetching events!');
      },
    }
  });

Answer 1

In the meantime, of course, the obvious workaround is to use the resources-as-function pattern instead, then you can construct the AJAX request exactly as you need it.

Thanks, @ADyson.

resources: function(callback){  
  jQuery('input[name="start"]').val(jQuery('#calendar').fullCalendar('getView').start.format());
  jQuery('input[name="end"]').val(jQuery('#calendar').fullCalendar('getView').end.format());
  jQuery.ajax({
    url: resourcesCallback,
    type: 'GET',
    dataType: "json",
    data: jQuery('.calendar_filter_form').serialize(),
    error: function() {
      // alert('Oops! Try again.');
    },
    success: function(response){
      callback(response);
    }
  });
},