AdminLTE3 FullCalendar动态填充事件时出现400错误及JSON解析问题求助

嘿，我来帮你搞定这个FullCalendar的问题！你的代码里有两个核心错误导致了现在的问题，咱们一步步拆解解决：

问题根源 #

1. 错误的events参数类型：FullCalendar的events属性如果传入字符串，会默认把它当作AJAX请求的URL来处理，这就是为什么你看到浏览器把你拼接的字符串当成了一个奇怪的URL去请求，服务器自然返回400错误——它根本找不到这个路径。
2. 非法的JSON格式：你手动拼接的字符串里包含new Date(y,m,1)这种JavaScript代码，而JSON语法不允许这种构造函数调用，所以JSON.parse会直接报错。

正确的实现方式 #

不要再用字符串拼接生成事件列表了，直接创建JavaScript数组对象就好，FullCalendar能直接识别这个数组，不会触发不必要的AJAX请求。修改后的代码如下：

$(document).ready(function () { 
    /* initialize the calendar -----------------------------------------------------------------*/
    //Date for the calendar events (dummy data)
    var date = new Date()
    var d = date.getDate(), m = date.getMonth(), y = date.getFullYear()
    var Calendar = FullCalendar.Calendar;
    var calendarEl = document.getElementById('calendar');
    
    // 直接创建事件数组，抛弃字符串拼接的方式
    var eventsArray = [];
    for (let i = 1; i < 6; i++) {
        eventsArray.push({
            title: `All Day Event ${i}`, // 用模板字符串更简洁
            start: new Date(y, m, i), // 直接生成Date对象，不用转字符串
            backgroundColor: "#f56954",
            borderColor: "#f56954",
            allDay: true // 这里用布尔值true，不是字符串"true"
        });
    }

    var calendar = new Calendar(calendarEl, {
        headerToolbar: {
            left : 'prev,next today',
            center: 'title',
            right : 'dayGridMonth'
        },
        themeSystem: 'bootstrap',
        // 直接传入数组对象，而非字符串
        events: eventsArray,
        editable : true,
        droppable : true, // this allows things to be dropped onto the calendar !!!
        drop : function(info) {
            // is the "remove after drop" checkbox checked?
            if (checkbox.checked) {
                // if so, remove the element from the "Draggable Events" list
                info.draggedEl.parentNode.removeChild(info.draggedEl);
            }
        }
    });
    calendar.render();
});

关键修改点解析 #

• 抛弃字符串拼接：用push方法直接向数组添加事件对象，这是JavaScript创建数组的标准方式，FullCalendar可以直接读取这个数组作为事件源。
• 修正allDay类型：FullCalendar要求allDay是布尔值（true/false），而不是字符串"true"，之前的字符串会导致事件渲染异常。
• 直接传入Date对象：start属性可以直接接受Date类型的值，不需要把它转成字符串，FullCalendar会正确解析这个时间。

为什么之前的代码会失败？ #

• 当events接收字符串时，FullCalendar会自动触发AJAX请求，把字符串当作URL，并拼接日历视图的start和end参数（就是你看到的URL末尾的那些参数），但服务器没有对应的路由，所以返回400错误。
• 你拼接的字符串包含new Date()这种JS语法，这不符合JSON的规范（JSON只允许键值对、字符串、数字、布尔值、数组、对象，不允许函数或构造函数调用），所以JSON.parse无法解析它。

内容的提问来源于stack exchange，提问作者Bartholomeus Bimo