使用外部拖动从 FullCalendar 获取数据答案

【问题标题】：Getting data from FullCalendar using external dragging使用外部拖动从 FullCalendar 获取数据
【发布时间】：2016-03-29 23:32:20
【问题描述】：

编辑：制作了一个显示问题的 Codebin：http://codebins.com/bin/4ldqoy2/3 TL;DR：将一个或多个事件拖到日历并单击保存按钮后，我想输出可以实际使用的格式正确的 JSON。

在 fullcalendar-2.6.1 外部拖动演示（external-dragging.html 中的http://fullcalendar.io/download/）中，我一直在尝试访问被拖动到日历中的事件的数据。

我尝试使用建议的：

$("#save").click(function() {
var eventsFromCalendar = $('#calendar').fullCalendar('clientEvents');
var eventsJson = JSON.stringify(eventsFromCalendar);

然而，eventsJson 输出以下错误： TypeError: 循环对象值

我找到了一种通过使用以下代码绕过错误的方法：

seen = [];

var eventsJson = JSON.stringify(eventsFromCalendar, function (key, val) {
   if (val != null && typeof val == "object") {
       if (seen.indexOf(val) >= 0) {
           return;
       }
       seen.push(val);
   }
   return val;
});

对于一个事件，这将输出以下内容：

[{
    "title":"My Event 3",
    "start":"2016-03-15",
    "end":null,
    "_id":"_fc5",
    "className":[],
    "allDay":true,
    "_allDay":true,
    "_start":"2016-03-15",
    "_end":null,
    "source":{"events":[null]}
}]

选择两个事件将输出以下内容：

    [{
        "title": "My Event 3",
        "start": "2016-03-23",
        "end": "2016-03-25",
        "_id": "_fc7",
        "className": [],
        "allDay": true,
        "_allDay": true,
        "_start": "2016-03-23",
        "_end": "2016-03-25",
        "source":
            {
                "events": [null, {
                    "title": "My Event 4",
                    "start": "2016-03-23",
                    "end": "2016-03-25",
                    "_id": "_fc13",
                    "className": [],
                    "allDay": true,
                    "_allDay": true,
                    "_start": "2016-03-23",
                    "_end": "2016-03-25"
                }]
            }
    }, null]

使用 3 个事件执行此操作将输出以下内容：

[{
"title": "My Event 2",
"start": "2016-03-27T00:00:00.000Z",
"end": null,
"_id": "_fc2",
"className": [],
"allDay": true,
"_allDay": true,
"_start": "2016-03-27T00:00:00.000Z",
"_end": null,
"source": {
    "events": [null,
        {
            "title": "My Event 4",
            "start": "2016-03-28T00:00:00.000Z",
            "end": null,
            "_id": "_fc7",
            "className": [],
            "allDay": true,
            "_allDay": true,
            "_start": "2016-03-28T00:00:00.000Z",
            "_end": null
        },
        {
            "title": "My Event 5",
            "start": "2016-04-04T00:00:00.000Z",
            "end": null,
            "_id": "_fc10",
            "className": [],
            "allDay": true,
            "_allDay": true,
            "_start": "2016-04-04T00:00:00.000Z",
            "_end": null
        }]
}
}, null, null]

如您所见，构造对象时出现了问题。我不确定 source: {"events":[null]} 应该是什么，但这可能是错误的原因。我也不确定 start 和 _start 和 end 和 _end 之间的区别是什么。

希望您能提供帮助。谢谢。

【问题讨论】：

您能准备一个演示，用 jsfiddle 或 codebin 之类的方式说明您的问题吗？
是的，你明白了。 codebins.com/bin/4ldqoy2/3
我猜您想将该 JSON 发送到您保存它的页面，不是吗？为什么不创建自己的对象，并在每个 drop 事件之后只存储想要的值，而不是仅在单击 #save 按钮时保存？
是的，我使用的是 ASP.NET MVC，所以我需要将它发送到控制器，但我需要在单击按钮时发送它。

标签： jquery fullcalendar

【解决方案1】：

使用上面的代码，因为我不喜欢 js，所以无论你的后端语言是什么，都可以使用它。

对我来说，我在 php 中使用了以下内容

$object = json_decode($request->request->get('hoursArray')[0]);
$myHours =[];
for($i=0;$i<count($object);$i++){
    if ($i==0){
        $myHours[$i]['title'] = $object[0]->title;
        $myHours[$i]['date'] = $object[0]->start;
     }else{
        $myHours[$i]['title'] = $object[0]->source->events[$i]->title;
        $myHours[$i]['date'] = $object[0]->source->events[$i]->start;
     }
}

【讨论】：