Laravel Livewire集成jQuery FullCalendar如何正确拉取数据库数据

你之前遇到的无限请求问题核心原因有两个：一是在事件请求的成功回调里错误调用了refetchEvents，该方法会重新触发事件加载逻辑，直接形成死循环；二是使用函数形式定义events时，没有调用组件提供的回调函数回传数据，组件会判定加载未完成持续重试。

下面是两种可直接落地的实现方式，以及对应的后端要求：

方式1：直接配置接口地址（最简方案） #

不需要手动写AJAX逻辑，FullCalendar会在日历初始化、切换月份/周/日视图、点击前后跳转按钮时，自动把当前视图的时间范围作为参数请求你配置的接口，代码如下：

<div id="calendar"></div>
<script>
$(document).ready(function(){
    $.ajaxSetup({
        headers:{
            'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
        }
    });

    var calendar = $('#calendar').fullCalendar({
        header:{
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        // 直接填写后端接口路由，组件自动发GET请求
        events: '/members-dashboard/getCurrentMonthActivities',
        selectable: true,
        selectHelper: true,
        // 加载出错时打印日志方便排查
        eventRenderError: function(err) {
            console.log('事件加载异常：', err)
        }
    });
});
</script>

组件自动发起的请求会携带start、end两个参数，对应当前视图展示范围的起止时间，后端直接接收这两个参数筛选对应时间段的活动即可，不需要手动计算当前月份。

方式2：自定义events函数（适合需要额外传参的场景） #

如果需要在请求里携带自定义筛选条件，比如指定活动类型、当前用户ID等，用自定义函数形式，注意不要在回调里调用refetchEvents，拿到数据后必须用组件传入的callback回传：

var calendar = $('#calendar').fullCalendar({
    header:{
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    events: function(start, end, timezone, callback){
        $.ajax({
            url: "/members-dashboard/getCurrentMonthActivities",
            type: "POST",
            data: {
                start: start.format('YYYY-MM-DD HH:mm:ss'), // 按后端需要的格式传时间
                end: end.format('YYYY-MM-DD HH:mm:ss'),
                // 可追加自定义参数，例：
                // activity_status: 1,
                // user_id: currentUserId
            },
            success:function(res){
                // 直接调用callback回传事件数组，禁止在这里调用refetchEvents
                callback(res.data)
            },
            error: function(){
                alert('活动数据加载失败，请刷新重试')
            }
        })
    },
    selectable: true,
    selectHelper: true
});

后端返回格式要求 #

不管用哪种方式，后端返回的JSON事件数组，每个事件对象必须包含核心字段，组件才能正常渲染：

• id：事件唯一标识，数字/字符串均可
• title：日历上显示的事件标题
• start：事件开始时间，符合ISO8601格式即可，全天事件可传2024-05-20格式，非全天传2024-05-20 14:30:00这类带时间的格式
• end：事件结束时间，格式同start，可空
• 可选扩展字段：color（事件块颜色）、allDay（是否为全天事件）、url（点击事件跳转地址）

返回示例：

[
    {
        "id": 101,
        "title": "会员线下交流会",
        "start": "2024-05-18 14:00:00",
        "end": "2024-05-18 17:00:00",
        "color": "#2385bb"
    },
    {
        "id": 102,
        "title": "5月积分加倍活动",
        "start": "2024-05-20",
        "allDay": true
    }
]

常见问题排查 #

• 接口无限请求：检查是否在events请求回调里调用了refetchEvents，是否正常调用callback回传了数据
• 事件不显示：打开浏览器控制台看接口返回状态是否200，返回的JSON格式是否符合要求，时间字段格式是否合法，有没有CSRF、跨域类报错
• 切换月份不加载新数据：不要在前端缓存事件数据，每次events触发时正常走接口请求即可，组件会自动在视图时间范围变化时触发拉取

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