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

fullcalendar

Solution

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

Problem

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. So If a user want to move an event to a different date in the calender then I need to be able to send the request to the database use ajax request. How can I collect the new information so if the appointment was moved to a new date or a new time how can I obtain the new information so I can pass it along to the server? More, what method do I use to send the same request if the user changes the time by expanding not by drag/drop event? ``` $(document).ready(function() { $('#calendar').fullCalendar({ editable: true, events: "json-events.php", timeFormat: 'h:mm{ - h:mm}', defaultView: 'agendaDay', eventDrop: function(event, delta, minuteDelta, allDay, revertFunc) { if (!confirm("Are you sure about this change?")) { revertFunc(); } // AJAX call goes here $.ajax(); }, loading: function(bool) { if (bool) $('#loading').show(); else $('#loading').hide(); } }); }); ```

Original source