本文详解 laravel 8（适配 php 8）中 fullcalendar 数据不显示的根本原因——事件数据格式不兼容、csrf 冲突、cdn 版本混用及事件属性命名错误，并提供可直接运行的标准化集成方案。
本文详解 laravel 8（适配 php 8）中 fullcalendar 数据不显示的根本原因——事件数据格式不兼容、csrf 冲突、cdn 版本混用及事件属性命名错误，并提供可直接运行的标准化集成方案。
在 Laravel 8 + PHP 8 环境下，FullCalendar 无法渲染数据库事件是典型兼容性问题：并非逻辑错误，而是数据结构、资源加载与 API 规范三重失配所致。原代码存在多个关键缺陷：
? 核心问题诊断
- events 属性重复定义：JS 中同时声明了 events: "{{ route('kkalender.index') }}" 和内联 events: [ @foreach ... ]，后者被前者覆盖，导致静态渲染失效；
- 事件字段不符合 FullCalendar v3 要求：dari/sampai 非标准字段，必须映射为 start/end；kategori/judul 未正确赋值给 title；
- CDN 混用引发冲突：同时引入 cdnjs 和本地 fullcalendar.min.js，且版本（v3.9.0）与 jQuery 3.1.1 存在兼容风险；
- PHP 8 严格模式暴露隐式转换问题：$value->dari 若为 null 或非 ISO 格式字符串，在 PHP 8 中易触发静默失败；
- CSRF Token 位置冗余且未生效：<meta> 标签重复，但 AJAX 请求未统一使用 X-CSRF-TOKEN 头。
✅ 正确实现方案（Laravel 8 + PHP 8 兼容）
1. Controller 优化（K_JadwalController.php）
public function index()
{
// 确保时间字段为 Carbon 实例并格式化为 ISO 8601
$events = K_Jadwal::all()->map(function ($item) {
return [
'id' => $item->id,
'title' => $item->judul, // 必须为 title
'start' => $item->dari->toISOString(), // FullCalendar 要求 ISO 格式
'end' => $item->sampai ? $item->sampai->toISOString() : null,
'className' => collect(['bg-teal', 'bg-purple', 'bg-warning', 'bg-primary'])
->random(),
];
});
return view('kkalender.index', compact('events'));
}2. Blade 模板精简（index.blade.php）
<!-- 移除所有 CDN FullCalendar 引入，仅保留本地资源 -->
<link rel="stylesheet" href="{{ asset('assets/plugins/fullcalendar/css/fullcalendar.min.css') }}">
<script src="{{ asset('assets/plugins/moment/moment.min.js') }}"></script>
<script src="{{ asset('assets/plugins/fullcalendar/js/fullcalendar.min.js') }}"></script>
<div id="calendar"></div>
<script>
$(document).ready(function() {
const SITEURL = "{{ url('/') }}";
// 统一 CSRF 设置
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
});
const bgClasses = ["bg-teal", "bg-purple", "bg-warning", "bg-primary", "bg-success"];
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
selectable: true,
defaultView: 'month',
events: @json($events), // 直接注入预处理的 JSON，避免 Blade 转义问题
eventClick: function(event) {
if (confirm('确定删除该日程？')) {
$.post(SITEURL + '/kkalender/fullcalenderAjax', {
id: event.id,
type: 'delete'
}).done(() => {
$('#calendar').fullCalendar('removeEvents', event.id);
toastr.success('日程已删除');
});
}
}
});
});
</script>3. 路由与资源规范
// routes/web.php
Route::get('/kkalender', [K_JadwalController::class, 'index'])->name('kkalender.index');
Route::post('/kkalender/fullcalenderAjax', [K_JadwalController::class, 'ajax'])->name('fullcalender.ajax');⚠️ 关键注意事项
- 时间格式强制校验：数据库 dari/sampai 字段必须为 DATETIME 类型，且 Eloquent 模型中需添加 $dates = ['dari', 'sampai'];；
- 避免 Blade 转义陷阱：使用 @json($events) 替代 @foreach 手动拼接，防止特殊字符（如单引号）破坏 JS 结构；
- PHP 8 兼容性检查：确保 K_Jadwal 模型中 $fillable 包含 dari/sampai，且 store() 方法使用 Carbon::parse() 显式转换输入时间；
- 调试技巧：在浏览器控制台执行 console.log(@json($events)) 验证数据结构是否符合 FullCalendar v3 Events API 规范。
✅ 最终效果：事件数据以标准 id/title/start/end 结构精准渲染，支持拖拽、点击删除，完全兼容 Laravel 8 与 PHP 8 的严格类型要求。此方案摒弃不可靠的 CDN 混用，采用本地资源+预处理 JSON，兼顾性能与稳定性。
