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

Posted 2023-03-14

【中文标题】如何在全日历中解析 json 格式的事件？

【英文标题】：How to parse events in json format in fullcalendar?

【发布时间】：2018-02-21 17:07:57

【问题描述】：

我有下面列出的完整日历的脚本。每件事都运行良好。我以 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 不支持这种格式。它支持您最初拥有的数组格式。你为什么改变它？除了出于某种原因您将它包裹在一个物体中之外，没有实质性的区别。似乎有点无意义。

【参考方案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