如何阻止FullCalendar切换上下月时重复请求事件（Laravel环境）

要实现仅首次加载或勾选复选框时才获取事件，核心是不要让FullCalendar自动管理事件请求，而是手动控制事件的加载和更新。具体做法如下：

1. 封装事件获取与更新函数 #

把收集选中日历、发起请求、更新日历事件的逻辑抽成独立函数：

function loadCalendarEvents() {
    // 收集当前选中的日历ID
    let selectedCalendars = [];
    $(".calendar_list:checked").each(function () {
        selectedCalendars.push($(this).val());
    });

    // 手动发起Ajax请求
    $.ajax({
        url: SITEURL + '/calendarsAjax',
        method: 'GET',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        data: {
            calendar_ids: selectedCalendars
        },
        success: function(response) {
            // 清空现有事件，添加新获取的事件数据
            calendar.removeAllEvents();
            calendar.addEventSource(response);
        },
        failure: function (e) {
            console.log(e);
        }
    });
}

2. 修改日历初始化逻辑 #

初始化时不再配置自动请求的events参数，改为创建空日历后手动加载初始数据：

let calendar;

document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('你的日历容器ID'); // 替换成实际的容器ID
    calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today addEventButton',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        // 移除自动发起请求的events配置
    });
    calendar.render();
    // 首次加载事件数据
    loadCalendarEvents();
});

3. 给复选框绑定切换事件 #

当勾选/取消勾选日历复选框时，触发重新加载事件：

$(".calendar_list").on('change', function() {
    loadCalendarEvents();
});

关键说明 #

• 原代码中events: {url: ...}的配置，会让FullCalendar在**每次视图范围变化（切换月份、切换视图类型）**时自动发起请求，这就是问题的根源。
• 改用手动管理事件后，FullCalendar会基于已加载的事件数据渲染不同月份、不同视图的内容，不会再自动发起Ajax请求。
• 如果后续需要新增事件，可以直接用calendar.addEvent()方法添加，无需重新请求全部数据。

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