如何在全日历中解析 json 格式的事件？答案

【问题标题】：How to parse events in json format in fullcalendar?如何在全日历中解析 json 格式的事件？
【发布时间】：2026-02-14 02:40:02
【问题描述】：

我有下面列出的完整日历的脚本。每件事都运行良好。我以 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'
            }
        }

});

这是我之前从 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"
 }]

这是我从同一个 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"
}]
}

【问题讨论】：

使用console.log检查以前工作数据中info的返回值是多少，您可能需要编写info.data才能获得相同的新数据集
很抱歉给您带来了困惑。我只是在那里复制了我所有的脚本。请忽略eventDrop 下方的代码。问题是新的数据集没有从这个方法events: { url: "{{ route('event_calendar.data') }}" }, 解析到事件日历中
能否创建示例 jsfiddle 以便于排除故障？
你不能改变你的php函数，让它在没有data的情况下返回它吗？
它不起作用也就不足为奇了，因为 fullCalendar 不支持这种格式。它支持您最初拥有的数组格式。你为什么改变它？除了出于某种原因您将它包裹在一个物体中之外，没有实质性的区别。似乎有点无意义。

标签： javascript jquery json laravel fullcalendar

【解决方案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

【讨论】：