调用 eventDrop 时，如何发送 ajax 请求以更新 FullCalendar UI 中的事件？答案

【问题标题】：How to send an ajax request to update event in FullCalender UI, when eventDrop is called?调用 eventDrop 时，如何发送 ajax 请求以更新 FullCalendar UI 中的事件？
【发布时间】：2013-08-14 17:30:03
【问题描述】：

我正在尝试使用这个很棒的用户界面“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();
        }

    });
});

【问题讨论】：

标签： fullcalendar

【解决方案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();
    }
  });
};

【讨论】：

首先，我想对一个冗长的答案表示歉意。这是这个问题的完美解决方案。非常感谢
event.id 未定义

【解决方案2】：

由于我现在找到了这个话题，我认为下面的信息对将来会有所帮助。

您可以使用JSON.stringify() 方法生成 JSON 作为发送日期。但是，在这种情况下需要小的解决方法：请参阅Tip on serializing event in fullCalendar with 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();
  });
};

【讨论】：