JQuery Fullcalendar – How to update all changed events together instead of one by one

ajaxfullcalendarjquery

I am using the FullCalendar jQuery plugin: http://arshaw.com/fullcalendar/

I am also using the example where you can drag external events onto the calendar: http://arshaw.com/js/fullcalendar-1.5.2/demos/external-dragging.html

Right now, I have an event click function as follows:

eventClick: function(event) {

$.ajax({
type: "POST",
url: "ajax-schedule.php",
data: 'id=' + event.id + '&start=' + event.start + '&end=' + event.end,
success: function(data){ 

alert('done!');     
}
});


}

This posts to a file "ajax-schedule.php" where the data is inserted into the mysql database.

I would like to create a link that when clicked will take all of the new/changed events and post the data as shown above, instead of one-by-one.

Something like:

<a href="#" onclick="updateSchedule();">Update Schedule</a>

The "updateSchedule" function would then post all the data.

Looks like the solution may involve the "clientEvents" method: http://arshaw.com/fullcalendar/docs/event_data/clientEvents/
… but I'm sort of lost here.

Any ideas as to how to do this?

Best Answer

You can create an array to store all the events:

var arrayOfEvents = [];

$('#calendar').fullCalendar({
    ...
    drop: function(date) {
        ...
        // retrieve the dropped element's stored Event Object
        var originalEventObject = $(this).data('eventObject');

        // we need to copy it, so that multiple events don't have a reference to the same object
        var copiedEventObject = $.extend({}, originalEventObject);

        // Push the event into the array
        arrayOfEvents.push(copiedEventObject);
        ...
    },
    ...
)};

function updateSchedule()
{
    var data = "numOfEvents=" + arrayOfEvents.length;

    // You can get all events out of the array here
    for (var i = 0 ; i < arrayOfEvents.length ; i++) {
         var event = arrayOfEvents[i];
         data += "&id"    + i + "=" + event.id
               + "&start" + i + "=" + event.start
               + "&end"   + i + "=" + event.end;
    }

    // Make your ajax post here
    $.ajax({
        type: "POST",
        url: "ajax-schedule.php",
        data: data,
        success: function(response){ 
            alert('done!');     
        }
    });
}

So on server-side, your code can get "numOfEvents" and just run a for loop from 0 to numOfEvents to get all events out.

Related Topic