Jquery FullCalendar + reload events in eventDrop function

Question

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

Regin Larsen Regin Larsen · Accepted Answer · 2013-08-08T08:59:59

You could provide a function to events that calls your end point:

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

And then inside the eventDrop function you could call refetchEvents, so FullCalendar will call the events function again and rerender the calendar:

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

You can check out the relevant documentation here: events (as a function) and refetchEvents.

Jquery FullCalendar + reload events in eventDrop function

1 Answers