FullCalendar中datesSet事件返回月份范围的正确获取方式

在使用FullCalendar进行月视图开发时，很多开发者会遇到一个常见问题：当调用datesSet事件返回的dateInfo.start.getMonth()时，获取到的月份可能与前一个月相同，而不是当前视图的主月份。这种现象特别容易出现在月初包含上个月末几天的场景中。

问题现象分析

以2024年8月为例，月视图的第一行通常会显示7月28、29、30、31日，然后才是8月1日开始的日期。此时如果直接使用datesSet事件返回的dateInfo.start.getMonth()，得到的结果会是7（代表7月），而实际上用户查看的主月份是8月。

技术原理

这种现象是由FullCalendar的设计机制决定的：

1. datesSet事件中的start/end属性返回的是日历实际渲染的日期范围
2. 为了保证月视图的完整显示，这个范围会包含前后月份的部分日期
3. 这种设计是为了确保日历能够正确获取需要显示的所有事件数据

解决方案

FullCalendar提供了专门的属性来获取当前视图的主月份范围：

• 使用view.currentStart可以获取当前视图主月份的开始日期
• 这个属性会准确返回用户正在查看的主月份，而不会包含前后月份的"溢出"日期

代码示例

calendar.setOption('datesSet', function(info) {
    // 传统方式可能返回不准确的月份
    const traditionalMonth = info.start.getMonth(); // 可能返回前一个月
    
    // 推荐方式获取准确的当前月份
    const accurateMonth = info.view.currentStart.getMonth(); // 始终返回当前主月份
    
    console.log('传统方式月份:', traditionalMonth + 1);
    console.log('准确月份:', accurateMonth + 1);
});

最佳实践建议

1. 当需要获取用户当前查看的主月份时，始终使用view.currentStart
2. datesSet中的start/end属性更适合用于获取事件数据的范围
3. 对于需要精确月份显示的功能（如标题栏、月份切换等），优先考虑currentStart
4. 注意JavaScript中月份是从0开始计数的，实际显示时需要+1

通过理解FullCalendar的这些设计特性和正确使用相关API，开发者可以避免月份显示不准确的问题，提供更好的用户体验。