Как отправить ajax-запрос на обновление события в пользовательском интерфейсе FullCalender, когда вызывается eventDrop?

Question

Я пытаюсь использовать этот замечательный пользовательский интерфейс " FullCalender", но я хочу отправить запрос ajax для обновления данных о событиях в базе данных, когда пользователь перемещает событие.

Поэтому, если пользователь хочет переместить событие на другую дату в каландре, тогда я должен иметь возможность отправить запрос в базу данных, используя запрос ajax.

Как я могу собрать новую информацию, чтобы, если встреча была перенесена на новую дату или новое время, как я мог получить новую информацию, чтобы я мог передать ее на сервер?

Более того, какой метод я могу использовать для отправки того же запроса, если пользователь изменяет время, расширяя его не по событию перетаскивания?

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

    });
});

Answer 1

Посмотрите на параметры функции: delta, minuteDelta а также allDay, Они рассказывают вам, как событие было изменено в днях, минутах и ​​было ли оно перенесено в слот на весь день. event Сам должен содержать идентификатор, чтобы вы могли идентифицировать его в своей базе данных.

Я сделал мне вспомогательную функцию updateEventTimes который просто вызывается из eventDrop а также eventResize с дополнительным логическим параметром.

Функция выглядит примерно так:

/*
 * 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

Поскольку я нашел эту тему сейчас, я думаю, что информация ниже будет полезна в будущем.

Вы могли бы использовать JSON.stringify() метод для генерации JSON в качестве даты отправки. Но в этом случае требуется небольшой обходной путь: см. Совет по сериализации события в fullCalendar с JSON.stringify.

Короче говоря, ваш код должен выглядеть так:

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