FullCalendar v3 到 v6 升级指南：正确获取当前视图与日期范围_技术教程

本文详解 fullcalendar 从 v3 升级至 v6 后如何替代已废弃的 `getview()` 方法，重点说明 `calendar.view` 的正确访问时机、属性变更（如 `intervalstart` → `currentstart`），并提供可直接复用的导出 excel 示例代码。

在 FullCalendar v4+（包括 v5 和 v6）中，所有 jQuery 插件式调用（如 $('#calendar').fullCalendar('method')）已被彻底移除，取而代之的是纯 JavaScript 实例化方式。这意味着你不能再使用 $('#calendar').fullCalendar('getView') —— 它不仅被弃用，而且在 v6 中完全不可用。

✅ 正确做法是：通过初始化后返回的 Calendar 实例直接访问 .view 属性。但关键前提是——必须在 calendar.render() 之后访问（而非“之前”，原答案中“要放在渲染前”属于严重错误，会导致 calendar.view 为 undefined）。

✅ 正确访问 view 的时机与方式

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    // 配置项（如 initialView、events、dateClick 等）
    initialView: 'dayGridMonth',
    // ...其他选项
  });

  calendar.render(); // ⚠️ 必须先 render！否则 calendar.view === undefined

  // ✅ 此时 view 已就绪，可安全访问
  function exportTableToExcel() {
    const view = calendar.view; // ✔️ 正确：通过实例访问
    const start = view.currentStart; // ✔️ 替代旧版 view.intervalStart._d
    const end = view.currentEnd;

    const month = start.toLocaleString('default', { month: 'long' });
    const year = start.getFullYear();

    // 后续导出逻辑（略）...
  }

  document.getElementById("test").onclick = exportTableToExcel;
});

? view 对象核心属性对照表（v3 → v6）

v3 写法（已废弃）	v6 等效写法	说明
view.intervalStart._d	view.currentStart	当前视图可见范围的起始 Date 对象（无需 _d）
view.intervalEnd._d	view.currentEnd	当前视图可见范围的结束 Date 对象
view.name	view.type	视图类型字符串，如 'dayGridMonth', 'timeGridWeek'
view.title	view.title	顶部标题文本（如 "July 2025"），仍可用

? 提示：view.currentStart 和 view.currentEnd 是标准 Date 实例，可直接用于 getFullYear()、getMonth()、toLocaleString() 等原生方法，无需再解包 _d。

⚠️ 常见错误与避坑指南

❌ 错误：$('#calendar').view 或 document.querySelector('#calendar').view
→ DOM 元素上不存在 view 属性，必须通过 FullCalendar.Calendar 实例访问。
❌ 错误：在 calendar.render() 之前读取 calendar.view
→ 此时 view 尚未初始化，值为 undefined，调用 currentStart 会报错。
❌ 错误：混淆 view.intervalStart（v3）与 view.currentStart（v4+）
→ v4 起 intervalStart/End 已移除，仅保留 currentStart/End（表示当前渲染范围）。
✅ 最佳实践：将依赖 view 的逻辑（如导出、筛选、API 请求）封装为独立函数，并确保在 calendar.render() 之后调用。

? 完整可运行导出函数（含健壮性增强）

function exportTableToExcel() {
  // ✅ 安全检查：确保 calendar 和 view 存在
  if (!window.calendar || !window.calendar.view) {
    console.warn('Calendar not initialized or not rendered yet.');
    return;
  }

  const view = window.calendar.view;
  const start = view.currentStart;

  // 格式化文件名（避免特殊字符）
  const monthName = start.toLocaleString('en-US', { month: 'long' });
  const year = start.getFullYear();
  const username = '';

  const fileName = `Ore_${monthName}_${year}_${username}.xls`;

  let tabText = '';
  tabText += `${fileName.replace('.xls', '')}`;
  tabText += '';
  tabText += '';
  tabText += $('#table2').html() || '';
  tabText += '';

  const blob = new Blob([tabText], { type: 'application/vnd.ms-excel' });
  const url = URL.createObjectURL(blob);

  const link = document.getElementById('test');
  link.href = url;
  link.download = fileName;
  link.click();

  // 清理内存
  setTimeout(() => URL.revokeObjectURL(url), 100);
}