Fullcalendar Event drop and ajax

Question

我目前正在使用伟大的Jquery插件Fullcalendar，但遇到了一个问题。我使用eventDrop侦听器，并希望使用Ajax将事件信息发送到服务器端。

我的代码如下：

eventDrop: function (event, dayDelta) {
                $.ajax({
                    url: ("/PSAdmin/RFCalendar/DragEvent"),
                    data: ({
                        type: event.className,
                        delta: dayDelta,
                        newDate: event.start,
                        newTitle: event.title
                    }),
                    type: "POST",
                    success: function (data) {
                        $('#calendar').empty();
                        loadCalendar();
                    },
                    error: function (xhr, status, error) {
                        alert("fail");
                    }
                });
}

我的问题是，一旦我尝试发送事件对象中包含的任何变量，它就不起作用。例如，只向服务器端发送dayDelta有效，但event.something都无效。

如果以前有人偶然发现这个问题，或者你知道是什么原因导致了这个问题，请告诉我。

Answer 1

所以很不幸，我不明白为什么ajax查询不能正常工作，我不得不做我最初不想做的事情。

if (event.className == "holiday") {
                    var className = "holiday";
                }
                //build date
                var date = event.start.getMonth()+1 + "/" + event.start.getDate() + "/" + event.start.getFullYear();
                alert(date);
                $.ajax({
                    url: ("/PSAdmin/RFCalendar/DragEvent/"),
                    data: ({
                        className: className,
                        delta: dayDelta,
                        newDate: date,
                        newTitle: event.title
                    }),
                    type: "POST",
                    success: function (data) {
                        $('#calendar').empty();
                        loadCalendar();
                    },
                    error: function (xhr, status, error) {
                        alert("fail");
                    }
                });

它很难看，也很耗时，但至少它有效。我还有其他优先事项要做，但如果你对这个问题有任何线索，请告诉我。

谢谢，Greg

Answer 2

答案很晚，但我遇到了一个类似的问题，没有任何信息发送到服务器。尝试了一切，缓存以及使用jquery来扩展和复制对象。

对我来说，有效的方法是查看请求的标题。他们似乎总是掌握数据。

我最终得到了这个代码服务器端。这不是我想要的，但它可能会帮助试图解决同样问题的人！

C#

[HttpGet]
    public void UpdateOrderData(object orderObj)
    {
        var obj = new
        {
            start = System.Web.HttpUtility.UrlDecode(HttpContext.Current.Request.QueryString["orderObj[start]"]),
            end = System.Web.HttpUtility.UrlDecode(HttpContext.Current.Request.QueryString["orderObj[end]"]),
            date = System.Web.HttpUtility.UrlDecode(HttpContext.Current.Request.QueryString["orderObj[date]"]),
            resourceId = System.Web.HttpUtility.UrlDecode(HttpContext.Current.Request.QueryString["orderObj[resourceId]"]),
            orderId = System.Web.HttpUtility.UrlDecode(HttpContext.Current.Request.QueryString["orderObj[orderId]"]),
        };
        calendarUnitOfWork.CustomDataRepository.UpdateOrderData(obj);
    }

Javascript

 myModel.eventDrop = function(event, delta, revertFunc, jsEvent, ui, view ) 
 {
     calUOW.orderrepository.updateOrderData({
            start: event.start.format(),
            end: event.end.format(),
            date: event.start.format("YYYY-MM-DD"),
            resourceId: event.resourceId,
            orderId: event.orderId
        });
  }

Answer 3

我今天遇到了同样的问题。这是我为eventDrop编写的函数。您可以在标签中或使用fullcalendar init函数的任何位置将JS代码添加到页面中。希望能有所帮助。

Javascript：

       eventDrop: function(event) {
          console.log(event.event);
                $.ajax({
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
                    },
                    url: "YOUR POST URL HERE",
                    data: {
                        id: event.event._def.publicId, // Event id for DB
                        start:event.event.startStr,  // Event start timestamp
                        end:event.event.endStr, // Event end timestamp
                        allDay:event.event.allDay // Event allDay Boolean
                    },
                    success: function(response){
                       console.log('success')
                    }
                });
            },

我的小型应用程序使用Laravel 9。这里有一个PHP函数，我用它来编辑完整的日历事件。

PHP函数：

    public function drop_json_appointments(Request $request)
    {
    $app = Appointment::where('id', $request->input('id'))->first();
    $start = Carbon::parse($request->input('start'))->format('Y-m-d H:i:s');
    $end = Carbon::parse($request->input('end'))->format('Y-m-d H:i:s');
    if($request->input('allDay') == 'false') $allDay = 0; else $allDay =1;
    Appointment::where('id', $request->input('id'))->update([
        'start'=>$start,
        'end'=>$end,
        'allDay'=>$allDay,
    ]);
    return response()->json('success');
    }

此外，您应该添加"；"调整大小事件"；的完整日历。这是调整大小的功能。PHP函数是相同的。

调整事件大小Javascript：

 eventResize: function(event) {
                $.ajax({
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: "SAME AJAX URL",
                    data: {
                        id: event.event._def.publicId,
                        start:event.event.startStr,
                        end:event.event.endStr,
                        allDay:event.event.allDay
                    },
                    success: function(response){
                        console.log('success')
                    }
                });

            },