0

I need to reload my Jquery Fullcalendar with an ajax call but ain't sure how to rebind the calendar again without recreating another one, basically what I am doing below is to initialize my calendar events by fetching the dates with my GetSchedule method.

When an eventDrop occurs, I will need to fetch the new set of data from my GetSchedule method and reload the fullcalendar again, reason being some events aren't suppose to be in some dates.

The below code will recreate another fullcalendar when an eventDrop occurs. Can someone please kindly advice. Thanks.

  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
        });
    });
4

1 回答 1

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');

您可以在此处查看相关文档：事件（作为函数）和refetchEvents。

于 2013-08-08T08:59:59.597 回答