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。这些告诉你如何在几天，几分钟内修改事件，以及它是否被移动到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作为发送日期。但是，在这种情况下需要小的解决方法：请参阅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();
  });
};

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

2 个答案: