Jquery FullCalendar+在eventDrop函数中重新加载事件

Question

我需要用ajax调用重新加载Jquery Fullcalendar，但不知道如何在不重新创建另一个日历的情况下重新绑定日历，基本上我下面要做的是通过GetSchedule方法获取日期来初始化日历事件。

当eventDrop发生时，我需要从GetSchedule方法中获取新的数据集，并再次重新加载完整日历，原因是有些事件不在某些日期。

当eventDrop发生时，下面的代码将重新创建另一个完整日历。有人能给我忠告吗。谢谢

  var sDate;
  var buildingEvents;
  function initialize(loadevents) {
        $.ajax({
            type: "POST",
            url: "../Account/WebServices/WebServices.asmx/GetSchedule",
            data: "{'custId': '" + $('#<%= hdnCustId.ClientID %>').val() + "' }",
            contentType: "application/json; charset=utf-8",
            async: false,
            dataType: "json",
            success: function(result) { sDate = result.d; }
        });
        var allEvent = "";
        buildingEvents = $.map(sDate, function(item) {
            allEvent += item + "&";
            var SplitResult = item.split("||");
            var eventInfo = new Array();
            for (var i = 0; i < SplitResult.length; i++) {
                eventInfo[i] = SplitResult[i];
            }
            var SplitResult_0 = eventInfo[0].split("|");
            $('#<%= hdnAllCalendarEvents.ClientID %>').val(allEvent);
            return {
                id: eventInfo[0],
                start: eventInfo[1],
                title: eventInfo[2] + ' ' + '(' + ' ' + SplitResult_0[4] + ' ' + ')'
            };
        });
        if (loadevents) {
            $('#calendar').fullCalendar({
                events: buildingEvents,
            });
        }
    }

       $(document).ready(function () {
        initialize(false);
        $('#calendar').fullCalendar({
            editable: true,
            eventDragStart: function (event, jsEvent, ui, view) {
                var d = new Date();
                d = event.start;
                $('#<%= hdnSwapDayFrm.ClientID %>').val(d.toString('MM/dd/yyyy'));
            },
            eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
                $('#<%= hdnOrderNpkSchSetDailyNameId.ClientID %>').val(event.id);
                $('#<%= hdnAddDays.ClientID %>').val(dayDelta);
                $.ajax({
                    type: "POST",
                    url: "../Account/WebServices/WebServices.asmx/SwapDay",
                    data: "{'hdnOrderNpkSchSetDailyNameId': '" + $('#<%= hdnOrderNpkSchSetDailyNameId.ClientID %>').val() + "', 'hdnAddDays': '" + $('#<%= hdnAddDays.ClientID %>').val() + "', 'hdnAllCalendarEvents': '" + $('#<%= hdnAllCalendarEvents.ClientID %>').val() + "', 'hdnAddDays': '" + $('#<%= hdnAddDays.ClientID %>').val() + "', 'hdnSwapDayFrm': '" + $('#<%= hdnSwapDayFrm.ClientID %>').val() + "'}",
                    contentType: "application/json; charset=utf-8",
                    async: false,
                    dataType: "json",
                    success: function(result) {
                    }
                });
                initialize(true);
            },
            events: buildingEvents
        });
    });

Answer 1

您可以向events提供一个函数来调用您的终点：

$('#calendar').fullCalendar({
    events: function(start, end, callback) {
        $.ajax({
            url: '...',
            success: function(data) {
                var events = parseEvents(data);
                callback(events);
            }
        });
    }
});

然后在eventDrop函数中，您可以调用refetchEvents，因此FullCalendar将再次调用events函数并重新发送日历：

$('#calendar').fullCalendar('refetchEvents');

您可以在这里查看相关文档：events（作为一个函数）和refetchEvents。