Laravel项目中Fullcalendar.js无法添加渲染事件问题求助

核心问题汇总 #

• 静态事件不显示：你配置的日历初始日期initialDate为2020-09-12，但静态事件的日期为2021-09-13，默认展示的2020年9月日历中不存在对应事件，自然看不到内容
• 接口返回格式不兼容：FullCalendar 要求events接口直接返回事件数组，你当前返回的是嵌套在concerts字段下的结构，无法被识别
• 异步请求时序错误：自行写AJAX拉取数据的方案中，你在AJAX请求还未返回时就已经初始化日历，此时事件数组为空
• 事件字段不符合规范：FullCalendar 没有单独的startTime字段，带时间的事件需直接将时间拼接在start字段中，格式为YYYY-MM-DD HH:mm

分步修复方案 #

1. 修复后端接口返回格式 #

修改Laravel路由对应的业务代码，直接返回事件数组，同时调整start字段格式：

$concerts = Concert::query()->whereStatus('1')->get();
$eventList = [];

foreach($concerts as $concert){
    $start_date = new DateTime($concert->start_date);
    $eventList[] = [
        'title' => json_decode($concert->title, true)['tr'],
        'start' => $start_date->format('Y-m-d H:i'),
        'allDay' => false // 若为全天事件可改为true
    ];
}

// 直接返回事件数组，不要嵌套额外层级
return response()->json($eventList);

2. 修复前端配置（二选一即可） #

方案A：直接使用FullCalendar内置的events接口配置

修改初始日期为你需要的时间段，其他配置无需调整：

document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');
    const calendar = new FullCalendar.Calendar(calendarEl, {
        themeSystem: 'bootstrap',
        height: '100%',
        expandRows: true,
        slotMinTime: '08:00',
        slotMaxTime: '20:00',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
        },
        initialView: 'dayGridMonth',
        initialDate: '2021-09-12', // 调整为和事件同时间段的日期，也可删除该行使用默认当前日期
        navLinks: true,
        editable: true,
        events: '/getConcerts',
        locale: 'tr',
        selectable: true,
        nowIndicator: true,
    });
    calendar.render();
});

方案B：自行调用AJAX拉取数据

将日历初始化逻辑放到AJAX请求成功的回调中，确保数据获取完成后再渲染日历：

document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');
    $.ajax({
        url: '/getConcerts',
        method: 'GET',
        success: function(eventList){
            const calendar = new FullCalendar.Calendar(calendarEl, {
                themeSystem: 'bootstrap',
                height: '100%',
                expandRows: true,
                slotMinTime: '08:00',
                slotMaxTime: '20:00',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                },
                initialView: 'dayGridMonth',
                initialDate: '2021-09-12',
                navLinks: true,
                editable: true,
                events: eventList,
                locale: 'tr',
                selectable: true,
                nowIndicator: true,
            });
            calendar.render();
        }
    });
});

3. 验证静态事件 #

如果要先验证静态事件是否正常，只需将事件日期调整为和初始日期同月份即可，示例：

events: [
    {
        title: 'Deneme',
        start: '2020-09-13', // 和initialDate的2020-09-12同月份
        allDay: true
    }
]

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