如何在FullCalendar中以JSON格式解析事件

Question

我有下面列出的完整日历的脚本。每件事都很好。我以JSON格式从控制器中存储在数据库中的事件。现在，JSON数据的格式略有更改，我无法解析日历中的事件。以下是我的脚本;

    $('#calendar').fullCalendar({
        editable: true,
        events: {
           url: "{{ route('event_calendar.data') }}"
        },
        eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
            var data = event.title;
            var start = event.start.format();
            var end = event.end.format();
            var csrf= "{{csrf_token()}}"
            $.post("{{ route('event_update') }}",{title: data, start: start, end: end, _token: csrf}, function (info) { $("#result").html(info); });
        },
        header: {
            center: 'month,thisWeek' // buttons for switching between views
        },
        views: {
            thisWeek: {
                type: 'agenda',
                duration: { week: 1 },
                buttonText: 'This week'
            }
        }
});

这是我以前以JSON格式的数据，它是从URL获得的，即{{ route('event_calendar.data') }}

[{
"id": 9,
"title": "Event 1",
"color": "#af2e0e",
"start": "2017-09-18",
"end": "2017-09-20"
 }, {
"id": 10,
"title": "Event 2",
"color": "#0b7c0d",
"start": "2017-09-04",
"end": "0000-00-00"
 }, {
"id": 11,
"title": "Event 3",
"color": "#378006",
"start": "2017-09-10",
"end": "2017-09-12"
 }, {
"id": 13,
"title": "Publication",
"color": "#378006",
"start": "2017-09-15",
"end": "2017-09-16"
 }, {
"id": 14,
"title": "other",
"color": "#378006",
"start": "2017-09-05",
"end": "2017-09-06"
 }, {
"id": 18,
"title": "other",
"color": "#378006",
"start": "2017-09-18",
"end": "2017-09-19"
 }, {
"id": 19,
"title": "Apple",
"color": "#378006",
"start": "2017-09-08",
"end": "2017-09-09"
 }, {
"id": 20,
"title": "Developer",
"color": "#378006",
"start": "0000-00-00",
"end": "0000-00-00"
 }, {
"id": 21,
"title": "New event",
"color": "#af2e0e",
"start": "2017-09-28",
"end": "2017-09-30"
 }, {
"id": 22,
"title": "asdasd",
"color": "#0b7c0d",
"start": "2017-08-28",
"end": "2017-08-31"
 }]

这是我从同一URL获取的新JSON数据。现在，如您所见，在日历中未显示顶级事件中添加的"数据"。如何解析此表格以显示日历中的事件？

{
"data": [{
    "id": 9,
    "title": "Event 1",
    "color": "#af2e0e",
    "start": "2017-09-18",
    "end": "2017-09-20"
}, {
    "id": 10,
    "title": "Event 2",
    "color": "#0b7c0d",
    "start": "2017-09-04",
    "end": "0000-00-00"
}, {
    "id": 11,
    "title": "Event 3",
    "color": "#378006",
    "start": "2017-09-10",
    "end": "2017-09-12"
}, {
    "id": 13,
    "title": "Publication",
    "color": "#378006",
    "start": "2017-09-15",
    "end": "2017-09-16"
}, {
    "id": 14,
    "title": "other",
    "color": "#378006",
    "start": "2017-09-05",
    "end": "2017-09-06"
}, {
    "id": 18,
    "title": "other",
    "color": "#378006",
    "start": "2017-09-18",
    "end": "2017-09-19"
}, {
    "id": 19,
    "title": "Apple",
    "color": "#378006",
    "start": "2017-09-08",
    "end": "2017-09-09"
}, {
    "id": 20,
    "title": "Developer",
    "color": "#378006",
    "start": "0000-00-00",
    "end": "0000-00-00"
}, {
    "id": 21,
    "title": "New event",
    "color": "#af2e0e",
    "start": "2017-09-28",
    "end": "2017-09-30"
}, {
    "id": 22,
    "title": "asdasd",
    "color": "#0b7c0d",
    "start": "2017-08-28",
    "end": "2017-08-31"
}]
}

Answer 1

可能是一个更好的选择，使您的源返回正确的格式化数据，但是如果由于某种原因无法执行此操作，则可以在JavaScript中进行。

FullCalendar文档描述了您可以在事件源中传递正常的$.ajax选项。因此，您可以指定成功回调，该回调以所需的格式返回数据。

我在本地使用您的数据尝试了一下：

$('#calendar').fullCalendar({
    // ... your code
    events: {
        url: "{{ route('event_calendar.data') }}",
        success: function(response) { 
            // Instead of returning the raw response, return only the data 
            // element Fullcalendar wants
            return response.data; 
        }
    },
    // ... rest of your Fullcalendar code