当调用eventDrop时，如何在FullCalender UI中发送ajax请求来更新事件

Question

我正在尝试使用这个很棒的UI"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作为发送日期。但是，在这种情况下，需要一个小的解决方法：请参阅使用JSON.stringify.在fullCalendar中序列化事件的提示

简而言之，您的代码应该看起来像：

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