Laravel 8 + FullCalendar 集成常见问题与完整解决方案-php教程-PHP中文网

Laravel 8 + FullCalendar 集成常见问题与完整解决方案

本文详解 laravel 8（适配 php 8）中 fullcalendar 数据不显示的根本原因——事件数据格式不兼容、csrf 冲突、cdn 版本混用及事件属性命名错误，并提供可直接运行的标准化集成方案。

本文详解 laravel 8（适配 php 8）中 fullcalendar 数据不显示的根本原因——事件数据格式不兼容、csrf 冲突、cdn 版本混用及事件属性命名错误，并提供可直接运行的标准化集成方案。

在 Laravel 8 + PHP 8 环境下，FullCalendar 无法渲染数据库事件是典型兼容性问题：并非逻辑错误，而是数据结构、资源加载与 API 规范三重失配所致。原代码存在多个关键缺陷：

Laravel Creem Agent

Creem 支付商店助理 — 查询订阅、客户、交易、产品，执行心跳检查，管理本地 Laravel支付商店。

下载

? 核心问题诊断

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 位置冗余且未生效：标签重复，但 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="%7B%7B%20asset('assets/plugins/fullcalendar/css/fullcalendar.min.css')%20%7D%7D"><script src="%7B%7B%20asset('assets/plugins/moment/moment.min.js')%20%7D%7D"></script><script src="%7B%7B%20asset('assets/plugins/fullcalendar/js/fullcalendar.min.js')%20%7D%7D"></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 规范。