FullCalendar列表视图无法展示2024年1月1日之前的事件

DevOps 小满

2026-4-14

兄弟，我看你遇到的这个问题挺闹心的——明明所有2018年起的事件数据都给全了，切换到列表视图却只显示2024年之后的内容。结合你已经尝试的方法，给你几个具体的排查和解决方向：

先确认事件的日期格式是否合规
检查所有2018年的事件，确保它们的start/end属性是FullCalendar能正确解析的标准格式，比如'2018-03-15'或'2018-03-15T14:00:00'这类ISO字符串。如果日期格式写错了，哪怕数据存在，FullCalendar也会识别错误并过滤掉这些事件。
调整自定义列表视图的配置逻辑
你自定义的listAllYears视图里，duration和visibleRange同时设置可能会产生冲突。试试去掉duration配置，只保留visibleRange，同时补全正确的日期格式：
```
views: {
  listAllYears: {
    type: 'list',
    visibleRange: { start: '2018-01-01', end: '2050-12-31' },
    listDayFormat: { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric'},
    listDaySideFormat: { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric'},
  },
},
```
注意你之前写的'2050-01-'是不完整的日期格式，必须补全具体日期（比如'2050-12-31'）。
优化视图切换的参数传递
切换视图时，确保changeView的第二个参数里的日期范围完整且正确，直接使用自定义视图的名称：
```
calendar.changeView('listAllYears', {
  start: '2018-01-01',
  end: '2050-12-31'
})
```
同时避免在切换前后重复调用setOption('visibleRange')，防止参数冲突覆盖。
排查事件源的范围限制
虽然你说所有事件都提供给了日历，但可以再用calendar.getEvents()在切换到列表视图后打印一下事件列表，确认2018年的事件真的被FullCalendar接收并正确解析了。另外检查事件源有没有设置过start/end的过滤条件——比如动态加载事件时，接口或本地逻辑是不是只返回了2024年之后的数据？
查看控制台的报错提示
打开浏览器开发者工具的控制台，看看有没有FullCalendar相关的警告或错误，比如日期解析失败的提示，这些信息往往能快速帮你定位问题根源。

按照这些步骤排查下来，应该能解决列表视图不显示旧事件的问题~

备注：内容来源于stack exchange，提问作者Spam Cie