为什么全日历无法解析JSON?

时间:2019-04-16 08:46:09

标签: javascript json fullcalendar fullcalendar-4

摘要

我已经设置了fullcalendar,我正尝试使用JSON事件源在其中显示数据,如其文档here中所述。

我不断收到以下失败消息Failure parsing JSON

我尝试过的事情

这是JSON,它将触发失败消息[{"title":"Lorem Ipsum","start":"2019-04-01","end":"2019-04-02"},{"title":"The Test","start":"2018-09-01","end":"2018-09-02"}]

我正在使用全日历版本4.0.2。
我已经验证了我的PHP代码在linter中返回的json。
我在json响应中添加了Content-Type: application/json标头。
我尝试使用eventDataTransform钩子返回完整日历文档here中的一些示例JSON(请参见编辑历史记录中的代码)

~~~奇怪的是,当我将上述JSON直接放在我的javascript中的events选项中时,它确实起作用。~~编辑:正如Jaromanda X和Quentin所指出的,这是一个javascript数组,并且不是JSON。

代码

    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: [ 'dayGrid' ],
        defaultView: 'dayGridMonth',
        locale: 'nl',
        events: '/fullcalendar/json.php'
    });

我希望可以解析我的json,因为响应与我直接提供给events选项的响应相同

其他信息

json.php文件的内容

<?php
header('Content-Type: application/json');
echo json_encode([
    [
        'title' => 'Lorem Ipsum',
        'start' =>  '2019-04-01',
        'end' =>  '2018-04-02'
    ],
    [
        'title' => 'The Test',
        'start' =>  '2018-09-01',
        'end' =>  '2018-09-02'
    ]
]);exit;

我尝试将方法更改为GET,但没有帮助。

我已附上我在检查器JSON response in inspector的“网络”标签中看到的响应的屏幕截图

2 个答案:

答案 0 :(得分:1)

恐怕我的解决方案可能对其他任何人都没有多大用处,但是在这里。

该错误是由于我们的主要js文件中的以下js代码行引起的。

  if($('table').length > 0){
         $('table').wrap('<div class="table-scroll"></div>');
    }

此行与fullcalender生成的HTML输出混淆,然后抛出failure parsing json错误。

答案 1 :(得分:0)

我在php页面中尝试了您的代码,并以events: '/fullcalendar/json.php'的全历调用,我不知道是什么给您造成了问题。 完美的作品。

<?php
 header('Content-Type: application/json');
 echo json_encode([
   [
    'title' => 'Lorem Ipsum',
    'start' =>  '2019-04-16T13:00:00',
    'end' =>  '2019-04-17T14:00:00'
   ],
   [
    'title' => 'The Test',
    'start' =>  '2019-04-16T10:00:00',
    'end' =>  '2019-04-17T13:00:00'
   ]
]);

但是也要考虑您的约会日期。您的开始时间是2019年,结束时间是2018年。还要插入时间来查看您的活动在哪里。