
本文详解 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 2024"),仍可用 |
? 提示: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 += '✅ 总结:升级核心是「放弃 jQuery 调用,拥抱实例属性」;calendar.view 是唯一正道,且务必在 render() 后使用。掌握 currentStart/currentEnd 与 view.type,即可平滑迁移所有视图相关逻辑。










