FullCalendar 跨年列表视图配置指南

在使用 FullCalendar 进行事件展示时，开发者经常需要展示跨越多个年份的事件列表。本文将以技术专家的视角，详细介绍如何配置 FullCalendar 的列表视图(listYear)来实现这一需求。

问题背景

在默认配置下，FullCalendar 的列表年视图(listYear)会按年份分页显示事件，当事件跨越多个年份时(例如从2025年11月延续到2026年2月)，用户需要手动切换年份才能查看完整的事件列表。这种分页行为在某些业务场景下会降低用户体验。

解决方案

FullCalendar 提供了 duration 配置项来解决这一问题。通过设置 duration 参数，开发者可以控制日历视图显示的时间跨度。

关键配置参数

duration 参数接受一个对象，可以包含以下属性：

• years: 设置显示的年份跨度
• months: 设置显示的月份跨度
• days: 设置显示的天数跨度

配置示例

要实现跨年显示事件列表，可以将 duration 设置为大于1年的值。例如：

{
  plugins: [listPlugin],
  initialView: 'listYear',
  duration: { years: 2 },  // 显示2年的事件
  events: [
    // 事件数据
  ]
}

实现原理

当设置了 duration 参数后，FullCalendar 会：

1. 计算从当前日期开始，加上 duration 指定的时间跨度
2. 获取该时间范围内的所有事件
3. 在同一个视图中连续显示这些事件，而不需要用户手动切换

最佳实践

1. 根据业务需求合理设置 duration 值，避免一次性加载过多事件影响性能
2. 对于长期项目，可以考虑结合 lazyFetching 配置优化性能
3. 在移动端使用时，注意测试不同 duration 值下的显示效果

总结

通过合理配置 duration 参数，开发者可以轻松实现 FullCalendar 列表视图的跨年显示功能，提升用户体验。这一功能特别适用于项目管理、长期活动跟踪等需要查看跨年事件的场景。