FullCalendar从v3升级到v6版本后，核心API的设计思路发生了较大变化，尤其是获取当前视图和日期范围的相关方法改动明显，很多旧版本的调用方式在新版本中无法直接生效。开发者在升级过程中如果不了解这些差异，很容易出现功能异常的问题。
v3版本获取当前视图与日期范围的方式
在FullCalendar v3版本中，获取当前视图和日期范围主要通过fullCalendar方法的参数传递实现，核心调用方式如下：
// 初始化v3版本的FullCalendar
$('#calendar').fullCalendar({
// 视图渲染完成后的回调
viewRender: function(view, element) {
// 获取当前视图对象
var currentView = view;
// 获取当前视图的开始日期
var startDate = view.start;
// 获取当前视图的结束日期
var endDate = view.end;
// 获取当前视图的名称，比如month、agendaWeek等
var viewName = view.name;
console.log('当前视图:', viewName);
console.log('开始日期:', startDate.format('YYYY-MM-DD'));
console.log('结束日期:', endDate.format('YYYY-MM-DD'));
}
});
// 也可以在外部主动获取当前视图信息
var currentView = $('#calendar').fullCalendar('getView');
var viewStart = currentView.start;
var viewEnd = currentView.end;
v6版本获取当前视图与日期范围的方式
v6版本采用了全新的ES模块设计，不再依赖jQuery，获取视图和日期范围的方式也改为了基于实例方法和事件回调，具体实现如下：
// 导入FullCalendar核心模块
import { Calendar } from '@fullcalendar/core';
// 导入需要的视图插件，这里以dayGrid月视图为例
import dayGridPlugin from '@fullcalendar/daygrid';
// 导入中文语言包
import zhLocale from '@fullcalendar/core/locales/zh-cn';
// 初始化日历实例
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
locale: zhLocale,
plugins: [dayGridPlugin],
// 视图渲染完成回调，替代v3的viewRender
datesSet: function(info) {
// 获取当前视图对象
var currentView = info.view;
// 获取当前视图的开始日期，是Date类型
var startDate = info.view.activeStart;
// 获取当前视图的结束日期，是Date类型
var endDate = info.view.activeEnd;
// 获取当前视图的名称
var viewName = info.view.type;
console.log('当前视图:', viewName);
console.log('开始日期:', startDate.toLocaleDateString());
console.log('结束日期:', endDate.toLocaleDateString());
}
});
// 渲染日历
calendar.render();
// 外部主动获取当前视图信息
var currentView = calendar.view;
var viewStart = currentView.activeStart;
var viewEnd = currentView.activeEnd;
var viewType = currentView.type;
两个版本的核心差异对比
| 对比项 | v3版本 | v6版本 |
|---|---|---|
| 依赖环境 | 依赖jQuery，通过$().fullCalendar调用 | 无jQuery依赖，通过实例化Calendar对象调用 |
| 视图渲染回调 | 使用viewRender回调 | 使用datesSet回调 |
| 获取视图对象 | 回调参数view或getView()方法返回的对象 | datesSet回调的info.view或calendar.view属性 |
| 日期范围属性 | view.start、view.end | view.activeStart、view.activeEnd |
| 视图名称属性 | view.name | view.type |
升级适配注意事项
- v6版本中日期对象都是原生Date类型，不再自带format方法，如果需要格式化日期，需要自行引入日期处理库比如dayjs或者moment.js。
- v6版本不再支持通过字符串方法调用API，所有操作都需要通过日历实例的方法或者属性实现，比如获取当前日期范围必须通过calendar.view.activeStart获取。
- 如果项目中需要监听视图切换事件，v6版本的datesSet回调会在每次视图日期范围变化的时候触发，包括切换视图、点击上下页等操作，和v3的viewRender触发时机基本一致。
- 升级时如果同时需要获取当前选中的日期，v6版本可以通过calendar.getDate()方法获取当前视图选中的日期，替代v3的$('#calendar').fullCalendar('getDate')。
常见问题解答
为什么升级后获取到的日期范围不对
大概率是还在使用v3的view.start和view.end属性，v6版本中这两个属性已经移除，需要替换为view.activeStart和view.activeEnd，这两个属性返回的是当前视图实际渲染的日期范围，比旧版本的start和end更准确。
如何在v6中主动触发获取当前视图信息
只需要在需要获取的地方访问日历实例的view属性即可，比如calendar.view就可以拿到当前视图对象，不需要像v3一样调用getView方法。
升级FullCalendar时建议先查看官方迁移文档，确认所有用到的API都有对应的替代方案，避免遗漏功能点导致升级后出现异常。
FullCalendarfullcalendar_upgradeview_date_rangecalendar_api修改时间：2026-07-14 06:03:26