3

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

    });
});
4

2 回答 2

4

看一下函数的参数:delta,minuteDeltaallDay。这些告诉你事件是如何在几天、几分钟内被修改的,以及它是否被移到全天时段。它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();
    }
  });
};
于 2013-08-15T08:01:01.697 回答
0

Since I found this topic now, I think information below will be helpful in future.

You could use JSON.stringify() method to generate JSON as send date. But, small workaround need in this case: see Tip on serializing event in fullCalendar with JSON.stringify.

In short, you code should looks like:

/*
 * 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();
  });
};
于 2016-10-25T11:50:25.077 回答