jquery - 动态添加资源到 fullcalendar

Question

我有一个场景，我将所有资源显示在一个下拉列表中，该列表是一个多选下拉列表。

我想在下拉列表中选择资源时将资源添加到日历。

这是我的日历代码:

var source = '/Request/GetBookingInfo?envid=0';
var resources = '/Request/GetEnvironments?envid=0';// + $('#ddlenv').val();

$('#calendar').fullCalendar({
    resourceAreaWidth: 230,
    editable: true,
    aspectRatio: 1.5,
    scrollTime: '00:00',
    header: {
      left: 'promptResource today prev,next',
      center: 'title',
      right: 'timelineDay,timelineThreeDays,timelineWeek,timelineMonth,timelineQuarter,timelineYear'
    },
    defaultView: 'timelineDay',
    views: {
      timelineThreeDays: {
        type: 'timeline',
        duration: { days: 3 }
      },
      timelineWeek: {
          type: 'timeline',
          duration: { days: 7 }
      },
      timelineMonth: {
          type: 'timeline',
          duration: { days: 30 }
      },
      timelineQuarter: {
          type: 'timeline',
          duration: { days: 90 }
      },
      timelineYear: {
          type: 'timeline',
          duration: { days: 365 }
      }
    },
    resourceLabelText: 'Rooms',
    resources:resources,
    events: source
});

//Dropdown change event

$('#ddlenv').on('change', function () {
    var resources = '/controller/actiontogetresources?envid=' + $('#ddlenv').val();
    var source = '/controller/actiontogetevents?envid=0';
    newSource = '/controller/actiontogetevents?envid=' + $('#ddlenv').val();
    var newResources = '/controller/actiontogetresources?envid=' + $('#ddlenv').val();
    resources = newResources;
    $('#calendar').fullCalendar('removeEventSource', source)
    $('#calendar').fullCalendar('refetchEvents')
    $('#calendar').fullCalendar('addEventSource', newSource)
    $('#calendar').fullCalendar('refetchEvents');
    source = newSource;

    var resour = {
        url: '/Request/GetEnvironments',
        type: 'POST',
        data: {
            envid: $('#ddlenv').val()
        }
    }

    $('#calendar').fullCalendar('removeResource', resour);
    $('#calendar').fullCalendar('addResource',  resour );

});

如何通过传递下拉选择的 ID 来调用操作并将资源绑定(bind)到日历？

Answer 1

根据 https://fullcalendar.io/docs/addResource和 https://fullcalendar.io/docs/removeResource ，“addResource”和“removeResource”方法接受一个资源对象，而不是一组 ajax 参数，这就是为什么您不能按照上面显示的方式使用它们的原因。这相当于使用事件对象，而不是事件源。

由于 fullCalendar 中没有事件源那样的“资源源”概念，因此您最好采用定义自定义“资源”提要的方法，每次它都可以从下拉列表中读取所选值运行，然后在下拉列表中进行新选择时使用“refetchResources”触发它。

您也可以对事件数据执行相同的操作。

像这样:

$('#calendar').fullCalendar({
  //..all your other options, and then define your resources like this...
  resources: function (callback) {
    $.ajax({
      url: '/Request/GetEnvironments',
      data: {
        envid: $('#ddlenv').val() //dynamically get the current selected option from the dropdown
      }
    }).done(function(response) {
      callback(response); //return resource data to the calendar via the provided callback function
    });
  },
  //..and your events like this...
  events: function(start, end, timezone, callback) {
    $.ajax({
      url: '/Request/GetBookingInfo',
      data: {
        envid: $('#ddlenv').val(), //dynamically get the current selected option from the dropdown
        //pass currently displayed start and end times to the server, so it can return just the data needed for the current display (and not do not return lots of irrelevant historical data)
        start: start.format("YYYY-MM-DD"),
        end: end.format("YYYY-MM-DD"),
      }
    }).done(function(response) {
      callback(response); //return event data to the calendar via the provided callback function
    });
});

//and now your "change" event handler is really simple:
$('#ddlenv').on('change', function () {
    $('#calendar').fullCalendar('refetchEvents')
    $('#calendar').fullCalendar('refetchResources');
});

参见 https://fullcalendar.io/docs/resources-function和 https://fullcalendar.io/docs/events-function了解更多详情。