Laravel8 FullCalendar events[]在PHP8下日历数据不显示问题

核心问题点 #

• 事件字段名不符合FullCalendar规范
  你用的FullCalendar 3.x版本，事件对象的核心识别字段是固定的：标题必须用title、开始时间必须用start、结束时间必须用end、事件唯一标识必须用id。你现在循环生成的事件对象用了judul、dari、sampai作为键名，组件读不到标题和时间，自然不会渲染事件。
• 重复定义events配置项
  初始化FullCalendar时你写了两次events配置，第一次是接口地址，第二次是后端注入的数据数组。JS对象同名键以后面的为准，前面的接口配置完全失效，而后面的数组字段又不符合规范，直接导致事件加载失败。
• 字段输出存在PHP8兼容问题
  你直接用单引号包裹Blade输出的字段值，PHP8下如果字段内容包含单引号、特殊字符，会直接生成语法错误的JS代码；另外PHP8下Eloquent返回的Carbon日期实例直接字符串输出，遇到时区配置偏差时会生成FullCalendar无法识别的时间格式。
• 缺少事件唯一ID
  当前输出的事件没有传id字段，就算事件显示出来，后续的拖拽修改、删除功能也会全部失效。

修复步骤 #

1. 删除初始化代码中重复的events: "{{ route('kkalender.index') }}",这行配置，保留后面的事件数组配置即可。
2. 将原来的events数组代码替换为以下内容，用@json指令做安全输出，同时修正字段名：

events: [
    @foreach ($data as $value)
    {
        id: {{ $value->id }},
        title: @json($value->judul),
        start: @json($value->dari),
        end: @json($value->sampai),
        kategori: @json($value->kategori),
        className: bg_task[Math.floor(Math.random() * bg_task.length)]
    },
    @endforeach
],

3. 额外优化：你页面里同时引入了Bootstrap4和Bootstrap5两个版本的CSS、JS文件，后续大概率会出现模态框弹窗失效、样式错乱问题，建议删除其中一个版本的引用。
4. 校验：改完后刷新页面，打开浏览器F12控制台确认没有JS报错，查看页面源码中生成的events数组，确认每个事件都有title/start/end字段即可。

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