jQuery Fullcalendar - How to update all changed events together instead of one by one?

Question

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?

Answer 1

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.

Answer 2

This is something I am planning to implement in future when I get to tweaking performance of my project. My general idea would be something like this:

1. create handler that stores every change made in fullcalendar, so new events, events updates (drag&drop, resize, title/description/color/whatever is needed), event deletions. I guess the best way would be to create "class" that will be part of fullcalendar itself, tweakable by options of cource, if it wont be part of fc you would need to call it in every state changing function.
2. This handler stores array of events as well as it provides some basic methods to add fc changes into queue. My idea is to make it event-based, so in array there is member defined by event id which has information about every update made on this event. The way I imagine this to work is not exactly like every event has its own array of updates which server will run sequentially. I think of making this in way, that handler will be set to be saving data every 15/30... seconds (will be set by user) or on user call (pressing button for example). In time between two saves, queue will be populated in way where all updates will be merged into one global change (for example, if you move one event in calendar 5 times, resize 3 times and change title 5 times but at the end its gonna be the very same as it was at the last save, there will be nothing send to server for saving because in reality, no change was made. Or if you do the same and then delete event, its senseless to save all changes and then delete event, instead of that handler will send only delete command as this command is not affected by any other previously done. But if you move event for example two days in future and then 1 day back, it will calculate it was actually moved only by one day forward so there wont be any unnecessary data posted to server).
3. Eventhought it would be the best to implement it directly to fullCalendar plugin, it also can be standalone class/plugin which could be associated with any kind of application which makes a lot of changes on some set of datas and requires communication to be highly efficient to maximize speed (so user wont be bothered by slow updates/saves). It can be tweaked even more by recognizing exactly which fields (I use fc basically as google calendar, I can change color, desription, title and many more fields, but It would be useless to send whole event as it is if for example only title is changed, no need to send fields that remained the same) in event had been updated and send only those, so there will absolutely no redundant data sent to server. I guess I would do this as every event would have its member in queue array (as I said before) and when new member for event is added to queue, it will store also current event data (which are for comparison only, wont be send to server) for further comparison with next updates (if there will be any).

Hope you didnt get lost and catch my drift. This is just my idea for usefull feature, but I dont see myself working on it this year, depends on school/job. Its not that hard to make it actually, at least not in way I imagine it to be, so there may be someone else who will do it before I even start :)