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

问题

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

    });
});

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

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

来源：https://stackoverflow.com/questions/18238405/how-to-send-an-ajax-request-to-update-event-in-fullcalender-ui-when-eventdrop-i

标签

fullcalendar