Question

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

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

以下代码将在发生eventDrop时重新创建另一个fullcalendar。有人可以请一点建议。感谢。

  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 (as a function)和refetchEvents。

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

1 个答案: