FullCalendar无法加载控制器返回的JSON数据问题求助

我想用FullCalendar展示数据库中状态为deal的报价单（Quotation）对应的项目日期，但目前脚本加载不到控制器返回的JSON数据，日历只显示今日日期。

视图页面脚本（Blade） #

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth'
        });
        $.ajax({
            url: "{{ route('calendar.quotations') }}",
            type: 'GET',
            dataType: "json",
            success: function(data) {
                data.forEach(function(event) {
                    calendar.addEvent({
                        title: event.title,
                        start: event.start
                    });
                });
            },
        });
        calendar.render();
    });
</script>

路由配置 #

Route::get('calendar', [App\Http\Controllers\CalendarController::class, 'index'])->name('calendar.index')->middleware('auth');
Route::get('quotations/events', [App\Http\Controllers\CalendarController::class, 'getQuotations'])->name('calendar.quotations')->middleware('auth');

控制器代码 #

public function index()
{
    return view('calendar.index');
}

public function getQuotations()
{
    $quotations = Quotation::where('status', 'deal')->get()->map(function ($quotation) {
        $cleanedDate = substr($quotation->project_date, 0, 8);
        $startDate = Carbon::createFromFormat('d-m-y', $cleanedDate)->format('Y-m-d');

        return [
            'title' => $quotation->project_name,
            'start' => $startDate,
        ];
    });

    return response()->json($quotations);
}

1. 修复异步执行顺序问题 #

当前代码中calendar.render()在AJAX请求完成前就执行了，导致事件添加时日历未完成渲染，或者事件添加后没有触发重新渲染。把calendar.render()移到AJAX的success回调内，同时增加错误调试代码：

修改后的脚本：

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth'
        });
        
        $.ajax({
            url: "{{ route('calendar.quotations') }}",
            type: 'GET',
            dataType: "json",
            success: function(data) {
                data.forEach(function(event) {
                    calendar.addEvent({
                        title: event.title,
                        start: event.start
                    });
                });
                // 确保事件添加完成后再渲染日历
                calendar.render();
            },
            error: function(xhr, status, error) {
                // 调试用：打印错误信息排查请求问题
                console.log(xhr.responseText);
                console.log(error);
            }
        });
    });
</script>

2. 验证日期格式转换逻辑 #

检查project_date的原始格式：如果是d-m-Y（比如05-10-2024），substr($quotation->project_date, 0, 8)会截断年份最后一位，导致Carbon解析失败。修改控制器中的日期处理代码：

// 替换原日期处理逻辑
// 假设project_date格式为d-m-Y
$startDate = Carbon::createFromFormat('d-m-Y', $quotation->project_date)->format('Y-m-d');

// 若格式不固定，可改用自动解析
// $startDate = Carbon::parse($quotation->project_date)->format('Y-m-d');

3. 排查AJAX请求状态 #

打开浏览器开发者工具（F12）→ Network标签，刷新页面后查看quotations/events请求：

• 401状态：检查是否已登录，或auth中间件配置是否正确
• 404状态：确认路由名称、URL生成是否正确
• 500状态：查看Laravel日志（storage/logs/laravel.log）排查服务器端错误
• 200但数据为空：检查数据库中是否存在status为deal的报价单，或project_date字段是否有有效值

4. 确认依赖文件已正确引入 #

确保页面加载了jQuery和FullCalendar的必要资源：

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入FullCalendar CSS -->
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/main.min.css' rel='stylesheet' />
<!-- 引入FullCalendar JS -->
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/main.min.js'></script>

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