Updated answer with example and further explanation as per OP's request
Working Example
You can check out the JSBin that I put together for a demo of the requested functionality. The code has supplemental comments documenting what exactly is going on -- and, more importantly, in most cases, why.
Using Unique Event IDs
The simplest implementation of a UID for events can be accomplished using a counter -- for each new event, the counter increments thus supplying the next event with a new UID.
As with all counters, we define its starting position...
var uid = 0;
For the purposes of the fullCalendar widget, we assign the UID to the external event when rendering its drop into the calendar. Each fullCalendar eventObject has an id attribute which we use to store this information.
The following is done within the scope of the fullCalendar.drop() event:
$('#calendar').fullCalendar('renderEvent', {
title: item,
start: date,
allDay: allDay,
id: uid++
}, true);
To monitor and update changes to an event item, we use a custom function to be called by both the eventResize and eventDrop (Internal drops / moving external events within the calendar) event handlers.
function validateUID(event) {
eventsData.forEach(function (elm, idx) {
if (elm.id == event.id) {
eventsData[idx] = {
name: event.title,
startDate: new Date(event.start).getTime(),
endDate: new Date(event.end).getTime(),
id: event.id
}
}
});
}
Again, you can see this method implemented in the provided JSBin.
Initial Response
A good way to handle this would be to dynamically build on an array -- we'll call it eventsData -- every time that fullCalender.drop() is called. In a simple implementation, you could do the following...
// define an array to store all events data
var eventsData = [];
// build the fullCalender widget
$('#calender').fullCalender({
header: { /* generic header information */},
editable: true,
droppable: true,
// the drop() event handler is called ONLY for external
// drop events.
drop: function (date /*, allDay, jsEvent, ui [, this]*/) {
// format `date` into the OPs suggested format.
// note that the external drop does not set an
// end date -- so we re-use the start date for now.
var fixed = new Date(date).getTime();
// add dates to eventsData[]
eventsData.push({
name: $(this).html(),
startDate: fixed,
endDate: fixed
});
}
});
However, as you'll note, the drop event handler is only called when an external event is dropped. For this to be a logical implementation, you would want to monitor any drop or resize event to assure that your eventsData object (array) is being consistently updated.
$('#calender').fullCalender({
eventDrop: function (/* event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view */) {
// handle all internal drops (or 'moves').
},
eventResize: function (/* event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view */) {
// handle all resizing events (i.e. changing an events duration)
}
})
Furthermore, you might want to think about adding a unique ID to each event that you log; that way you could perform a logical check to assure that you are updating changes to old events rather than tacking on invalid duplicates.
Button Click
As this solution dynamically builds the array as objects are added/changed, you can simply add...
$('#save').click(function () {
// do something with eventsData...
});
... to your script, and be able to access the current events array at any point.
