如何在调用eventDrop时发送ajax请求以在FullCalender UI中更新事件？ [英] How to send an ajax request to update event in FullCalender UI, when eventDrop is called?

问题描述

我正尝试使用这个伟大的用户界面 FullCalender 但我想要做的是发送一个Ajax请求，用于在用户移动事件时更新数据库中的事件数据。

因此，如果用户想将事件移动到日历中的其他日期，那么我需要能够使用ajax请求将请求发送到数据库。

如何收集新信息，以便将约会移至新日期或新时间如何获取新信息，以便我可以将其传递给服务器？

更多的，如果用户通过扩展而不是通过拖放事件来改变时间，我会用什么方法发送相同的请求？

  $（document）.ready（function（）{
 $（'＃calendar'）。fullCalendar（{
 
可编辑：true，
 
 events：json-events.php，
 timeFormat：'h：mm { -  h：mm}'，
 defaultView：'agendaDay' ，
 
 
 eventDrop：function（event，delta，minuteDelta，allDay，revertFunc）{
 
 if（！confirm（你确定这个改变吗？ ））{
 revertFunc（）; 
} 
 // AJAX调用在这里
 $ .ajax（）; （
 
），
 
 loading：function（bool）{
 if（bool）$（'＃loading'）。show（）; 
 else $（'＃loading'）。hide（）; 
} 
 
}）; 
}）; 
  

解决方案

查看函数的参数： delta ， minuteDelta 和 allDay 。那些告诉你事件是如何在几天，几分钟内被修改的，以及它是否被移到了全天时段。 事件本身应该包含一个标识符，以便您可以在数据库中识别它。

我让我成为帮手从 eventDrop 和 eventResize 中简单调用的函数 updateEventTimes 一个额外的布尔参数。

该函数看起来大致如下：

  / * 
 *发送请求以修改事件的开始/结束日期到服务器
 * / 
 function updateEventTimes（drag，event，dayDelta，minuteDelta，allDay，revertFunc）
 {
 //console.log（事件）; 
 $ .ajax（{
 url：update.php，
 type：POST，
 dataType：json，
 data：（{
 id：event.id，
 day：dayDelta，
 min：minuteDelta，
 allday：allDay，
 drag：drag 
}），
成功：function（data，textStatus）{
 if（！data）
 {
 revertFunc（）; 
 return; 
} 
 calendar.fullCalendar （'updateEvent'，event）; 
}，
 error：function（）{
 revertFunc（）; 
} 
}）; 
}; 
  

I am trying to use this great UI "FullCalender" But what I want to do is send an ajax request to update the event data in the database when the user move the event around.

So If a user want to move an event to a different date in the calender then I need to be able to send the request to the database use ajax request.

How can I collect the new information so if the appointment was moved to a new date or a new time how can I obtain the new information so I can pass it along to the server?

More, what method do I use to send the same request if the user changes the time by expanding not by drag/drop event?

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

    });
});

解决方案

Take a look at the parameters of the function: delta, minuteDelta and allDay. Those tell you how the event was modified in days, minutes and if it was moved to the allday slot. The event itself should hold an identifier so that you can identify it in your database.

I made me a helper function updateEventTimes which is simply called from eventDrop and eventResize with an extra boolean parameter.

The function looks roughly like this:

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

这篇关于如何在调用eventDrop时发送ajax请求以在FullCalender UI中更新事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！