未添加完整日历资源额外参数

Question

我尝试自定义与 fullCalendar 库上的事件和资源一起发送的参数。

我使用完整日历版本 3。

我可以从表单中获取这些自定义参数并将它们分配给事件请求。

但问题在于资源，我对两者使用相同的代码，但请求 URL 用于资源中断，并且还丢失了默认的开始和结束婴儿车。

我试过的代码：

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!');
  },
},

以及活动部分：

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!');
  },
}

我得到的生成的URL是这些：

对于事件：

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

资源：

Request URL: DOMAIN/resources?_=1563776826863

我需要像第一个一样生成第二个 URL，如您所见，代码相同但结果不同，有什么问题吗？

完整代码（如果需要）：

  $('#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

与此同时，当然，明显的解决方法是改用资源即功能模式，然后您可以根据需要构造 AJAX 请求。

谢谢@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);
    }
  });
},

未添加完整日历资源额外参数

Full calendar resource extra params not added

javascript

ajax

jquery

fullcalendar

fullcalendar-3