使用FullCalendar 5.5.1报$(...).fullCalendar is not a function错如何解决

• FullCalendar 从v4版本开始就彻底移除了jQuery依赖，不再提供$(...).fullCalendar()这类jQuery插件调用方式，你当前使用的v5.5.1属于新版本，沿用的v3及更早版本的语法自然会抛出方法不存在的错误。
• 你参考的教程项目使用的是FullCalendar v3版本，所以原有写法可以正常运行，版本不匹配是核心问题。

方案1：升级适配v5版本语法（推荐） #

将原有jQuery式写法替换为v5原生JS调用方式，同时注意配置项的命名变更，修改后的代码示例如下：

document.addEventListener('DOMContentLoaded', function () {
    InitializeCalendar();
});

function InitializeCalendar() {
    try {
        // 直接获取DOM节点，不再用jQuery封装调用
        const calendarEl = document.getElementById('calendar');
        const calendar = new FullCalendar.Calendar(calendarEl, {
            timeZone: 'local', // 原timezone: false的等效配置
            headerToolbar: { // 原header配置在v5中更名为headerToolbar
                left: 'prev,next,today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay' // 原视图名称对应更名
            },
            selectable: true,
            editable: false
        });
        // 手动调用渲染方法
        calendar.render();
    } catch (e) {
        alert(e);
    }
}

额外注意：v5采用模块化设计，你当前引入的基础CDN包不包含dayGrid、timeGrid等视图插件，需要额外引入对应插件包，或者直接替换为包含常用功能的完整整合包，避免出现视图不显示的问题。

方案2：降级到v3版本沿用原有代码 #

如果不想修改现有业务代码，可以直接将FullCalendar依赖替换为v3版本的CDN资源即可：

<!-- 替换原有v5的CDN地址 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/fullcalendar@3.10.2/dist/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@3.10.2/dist/fullcalendar.min.css">

v3版本依赖jQuery和moment.js，你当前已经引入了moment.js，只需要确保jQuery资源在FullCalendar之前加载即可。

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