javascript - 如何在 fullcalendar 中解析 json 格式的事件？

Question

我有下面列出的完整日历的脚本。一切正常。我以 JSON 格式从 Controller 返回存储在数据库中的事件。现在 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'
            }
        }

});

这是我以前从 url 获取的 JSON 格式的数据，即 {{ 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"
 }]

这是我从同一网址获取的新 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 中做到这一点。

The Fullcalendar docs describe您可以在事件源中传递正常的 $.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