FullCalendar v5无法渲染PHP返回JSON中的事件求助

问题描述 #

使用FullCalendar v5开发，日历可正常渲染，但后端返回的事件无法显示。前端初始化代码如下：

var date = new Date()
var d = date.getDate(),
    m = date.getMonth(),
    y = date.getFullYear()

var Calendar = FullCalendar.Calendar;
var calendarEl = document.getElementById('calendar');

// initialize the external events
// -----------------------------------------------------------------
var calendar = new Calendar(calendarEl, {
    headerToolbar: {
        left: 'prev,next,today',
        center: 'title',
        right: ''
    },
    themeSystem: 'bootstrap',
    events: {
        url: '/load/load_event.php,
        method: 'GET',
        failure: function () {
            alert('there was an error while fetching events!');
        }
    }
});
calendar.render(); 

后端load_event.php返回的JSON数据：

[
  {
    "id": 1,
    "Title": "Not Available",
    "Start": "2022-07-21",
    "End": "2022-08-05",
    "backgroundColor": "#FF0000",
    "borderColor": "#FF0000"
  }
] 

错误原因及解决方法 #

1. 前端URL配置存在语法错误 #

在events配置的url字段中，单引号未闭合：

url: '/load/load_event.php, // 缺少末尾的单引号

解决方法：补充单引号，修正为：

url: '/load/load_event.php',

2. 后端返回的JSON字段名不符合FullCalendar规范 #

FullCalendar v5对事件字段名有严格的大小写要求，默认识别小写的字段名：

• 事件标题：title（而非Title）
• 开始时间：start（而非Start）
• 结束时间：end（而非End）

后端返回的JSON使用了大写开头的字段名，FullCalendar无法识别这些字段，因此不会渲染事件。

解决方法：修改后端load_event.php的输出，将字段名改为小写：

[
  {
    "id": 1,
    "title": "Not Available",
    "start": "2022-07-21",
    "end": "2022-08-05",
    "backgroundColor": "#FF0000",
    "borderColor": "#FF0000"
  }
] 

完成以上两处修改后，事件即可正常显示在日历上。

内容的提问来源于stack exchange，提问作者Wilson Ho