Laravel Blade内容区域使用FullCalendar JS实现订单日历失败求助
2026-4-14
Laravel Blade内容区域使用FullCalendar JS实现订单日历失败求助
你好呀！看到你在Laravel Blade里尝试用FullCalendar做订单日历，但日历一直不显示，试了很多教程都没解决，我帮你梳理几个可能的问题点，你可以逐一排查看看：
问题截图
你使用的Blade代码
@extends('layouts.main') @section('konten') <div class="konten-layout py-3 px-2"> <div class="text-center mb-10"> <h2 class="font-semibold text-lg lg:text-2xl">Daftar Pesanan</h2> </div> <div class="my-10 lg:px-10"> <span> <a class="bg-primary text-white px-2 py-1 rounded-lg hover:bg-primary/50" href="/pesan-lapangan/create/{{auth()->user()->id}}"> Pesanan Baru + </a> </span> </div> <div class="px-[2px] lg:px-10 mb-[100px] lg:mb-[143px]"> <!-- Elemen kalender --> <div id="calendar"></div> </div> </div> @endsection @section('scripts') <!-- FullCalendar CSS --> <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function () { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { plugins: ['dayGrid', 'interaction'], initialView: 'dayGridMonth', events: [ @foreach ($pesanan as $psn) { title: '{{ $psn->kode . $psn->numInvoice }} - {{ $psn->status == "1" ? "Belum Bayar" : ($psn->status == "2" ? "Sedang diproses" : ($psn->status == "3" ? "Berhasil" : "Gagal")) }}', start: '{{ $psn->tanggal }}', url: '{{ $psn->status == "1" ? "/pesan-lapangan/konfirmasi-pembayaran/" . $psn->numInvoice : "/detail-pesanan/" . $psn->numInvoice }}', backgroundColor: '{{ $psn->status == "1" ? "#fbbf24" : ($psn->status == "2" ? "#94a3b8" : ($psn->status == "3" ? "#14b8a6" : "#f87171")) }}', borderColor: '#ffffff', }, @endforeach ], dateClick: function (info) { alert('Anda mengklik tanggal: ' + info.dateStr); }, }); calendar.render(); }); </script> @endsection
可能的问题及排查方向：
- 缺少FullCalendar的CSS文件：你只引入了FullCalendar的JS，但它需要对应的CSS才能渲染出日历的样式（不然元素可能存在但肉眼看不到）。你可以在
@section('scripts')上方或者页面的<head>部分加上同版本的CSS链接：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/main.min.css">
$pesanan变量未正确传递：Blade里用了@foreach ($pesanan as $psn)，但要确认后端控制器有没有把$pesanan变量传递到这个视图。如果没传，会直接导致JS语法错误，整个脚本执行失败，日历自然渲染不出来。你可以检查控制器代码，确保有类似return view('你的视图文件名', compact('pesanan'));的语句。Blade与JS的转义冲突：直接在JS里用
'{{ $psn->字段 }}'的方式，如果字段里有单引号、换行等特殊字符，会破坏JS语法。建议改用json_encode来自动处理转义，比如把title那行改成：
title: {{ json_encode($psn->kode . $psn->numInvoice . ' - ' . ($psn->status == "1" ? "Belum Bayar" : ($psn->status == "2" ? "Sedang diproses" : ($psn->status == "3" ? "Berhasil" : "Gagal")))) }},
其他字段比如start、url也可以用同样的方式处理。
浏览器控制台的错误提示：这是最直接的排查方法！按下F12打开开发者工具，切换到Console标签，看看有没有红色的错误提示（比如语法错误、资源加载失败、变量未定义等），这些错误信息能帮你快速定位核心问题。
日历容器的高度问题：FullCalendar需要容器有足够的高度才能显示。你可以给
#calendar加个最小高度样式，比如：
<div id="calendar" style="min-height: 600px;"></div>
你可以先从检查浏览器控制台错误开始，这个往往能最快找到问题所在，然后再逐一尝试上面的解决方法~
备注：内容来源于stack exchange，提问作者Irvan Fadillah
