fullcalendar - 如何在调用 eventDrop 时发送 ajax 请求以更新 FullCalendar UI 中的事件？

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。那些告诉你事件是如何在几天、几分钟内被修改的，以及它是否被移动到全天时段。 事件 本身应该包含一个标识符，以便您可以在数据库中识别它。

我为我创建了一个辅助函数 updateEventTimes，它只是通过一个额外的 bool 参数从 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();
    }
  });
};