FullCalendar标签页切换显示异常及$(...).fullCalendar不是函数报错

首先，你遇到的Uncaught TypeError: $(...).fullCalendar is not a function错误，核心原因大概率是FullCalendar版本兼容问题——从v4版本开始，FullCalendar彻底移除了jQuery依赖，不再支持$(selector).fullCalendar()这种jQuery式调用方法，转而使用原生JS的Calendar实例来操作。

一、先理清FullCalendar的正确操作方式 #

如果你的FullCalendar是v4及以上版本，初始化和调用方法的方式已经完全变了：

1. 初始化日历时保存实例

不要用jQuery初始化，而是直接创建Calendar实例，并把实例绑定到对应的DOM元素上，方便后续标签切换时获取：

// 初始化第一个日历
const calendar1El = document.getElementById('Calendar-on26xq0w');
const calendar1 = new FullCalendar.Calendar(calendar1El, {
  // 你的日历配置项，比如：
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek'
  },
  // 其他配置...
});
calendar1.render();
// 把实例存到DOM元素的自定义属性里
calendar1El.calendarInstance = calendar1;

// 初始化第二个日历（对应第二个标签页）
const calendar2El = document.getElementById('你的第二个日历ID');
const calendar2 = new FullCalendar.Calendar(calendar2El, {
  // 相同或不同的配置
});
calendar2.render();
calendar2El.calendarInstance = calendar2;

2. 标签切换时操作日历实例

在tabbis的回调函数里，找到当前标签页的日历元素，取出之前保存的实例，然后调用render()重新渲染（解决隐藏时无法正常显示的问题），或者获取视图信息：

var tabs = tabbis.init({
  tabGroup: "[data-tabs]",
  paneGroup: "[data-panes]",
  tabActive: "active",
  paneActive: "active",
  callback: function (tab, pane) {
    // 保留你原来的DataTables处理逻辑
    try {
      var tableid = document.getElementById(tab.id + "-Content").querySelector('table[id^="DT-"]').id;
      $("#" + tableid).DataTable().columns.adjust().responsive.recalc();
    } catch (e) {
      console.log('No datatables available.');
    }

    // 处理FullCalendar的部分
    try {
      // 找到当前标签页内的日历元素
      const calendarEl = document.getElementById(tab.id + "-Content").querySelector('div[id^="Calendar-"]');
      if (calendarEl) {
        // 获取之前保存的日历实例
        const calendar = calendarEl.calendarInstance;
        if (calendar) {
          // 重新渲染日历，解决隐藏标签页导致的显示异常
          calendar.render();
          // 获取视图信息（替代原来的fullCalendar('getView')）
          const view = calendar.getView();
          alert("The view's title is " + view.title);
        }
      }
    } catch (e) {
      console.error('Calendar operation error:', e);
    }
  }
});

二、如果是旧版本FullCalendar（v3及更早） #

如果你确实在用v3或更早版本，那报错可能是脚本加载顺序问题：

• 确保jQuery脚本在FullCalendar脚本之前加载，因为旧版本FullCalendar依赖jQuery；
• 检查是否引入了正确的FullCalendar文件（比如fullcalendar.min.js，而不是仅引入了样式文件）；
• 标签切换时可以用$(selector).fullCalendar('render')来重新渲染隐藏的日历。

三、为什么DataTables的try/catch能正常工作？ #

DataTables至今仍保留了jQuery插件版本的支持，所以你用$("#tableid").DataTable()的写法是兼容的，这和FullCalendar的版本迭代策略不同，所以两者不能直接类比。

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