How to send an ajax request to update event in FullCalender UI, when eventDrop is called?

Question

I am trying to use this great UI \"FullCalender\" But what I want to do is send an ajax request to update the event data in the database when the user move the event around.

Answer 1

Take a look at the parameters of the function: delta, minuteDelta and allDay. Those tell you how the event was modified in days, minutes and if it was moved to the allday slot. The event itself should hold an identifier so that you can identify it in your database.

I made me a helper function updateEventTimes which is simply called from eventDrop and eventResize with an extra boolean parameter.

The function looks roughly like this:

/*
 * Sends a request to modify start/end date of an event to the server
 */
function updateEventTimes(drag, event, dayDelta, minuteDelta, allDay, revertFunc)
{
  //console.log(event);
  $.ajax({
    url: "update.php",
    type: "POST",
    dataType: "json",
    data: ({
      id: event.id,
      day: dayDelta,
      min: minuteDelta,
      allday: allDay,
      drag: drag
    }),
    success: function(data, textStatus) {
      if (!data)
      {
        revertFunc();
        return;
      }
      calendar.fullCalendar('updateEvent', event);
    },
    error: function() {
      revertFunc();
    }
  });
};

Answer 2

Since I found this topic now, I think information below will be helpful in future.

You could use JSON.stringify() method to generate JSON as send date. But, small workaround need in this case: see Tip on serializing event in fullCalendar with JSON.stringify.

In short, you code should looks like:

/*
 * Sends a request to modify start/end date of an event to the server
 */
function updateEventTimes(drag, event, dayDelta, minuteDelta, allDay, revertFunc)
{
  delete event.source; 

  $.post(
    "update.php",
    event,
    function(result) {
      if (!result) revertFunc();
    }
  )
  .fail(function() {
      revertFunc();
  });
};