Fullcalendar listDay视图配置问题：需默认显示6am至次日6am事件

首先直接给结论：FullCalendar的listDay视图并没有像agendaView那样原生的scrollTime或minTime配置项，但我们可以通过自定义视图范围+钩子函数的组合来完美实现你的需求，下面是具体步骤：

1. 自定义listDay视图的时间范围 #

通过views配置项，我们可以重新定义listDay视图的起始和结束时间，让它聚焦在当天6am到次日6am这个区间内，FullCalendar会自动只加载并显示这个范围内的事件：

document.addEventListener('DOMContentLoaded', function() {
  const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
    initialView: 'listDay',
    views: {
      listDay: {
        type: 'list',
        duration: { days: 1 },
        // 设置视图起始时间为当天6点
        start: function(date) {
          const adjustedDate = new Date(date);
          adjustedDate.setHours(6, 0, 0, 0);
          return adjustedDate;
        },
        // 设置视图结束时间为次日6点
        end: function(date) {
          const nextDay = new Date(date);
          nextDay.setDate(nextDay.getDate() + 1);
          nextDay.setHours(6, 0, 0, 0);
          return nextDay;
        }
      }
    },
    // 你的其他日历配置（比如events数据源等）
    events: [
      // 示例事件
      { title: '早会', start: '2024-05-20T07:00:00' },
      { title: '夜班值守', start: '2024-05-20T23:00:00', end: '2024-05-21T05:30:00' }
    ]
  });
  calendar.render();
});

这个配置会让listDay视图的时间范围牢牢锁定在你需要的区间，所有不在这个范围内的事件都会被自动过滤掉。

2. 实现首次加载时聚焦到6am位置 #

因为listDay是列表形式而非时间轴，没有原生的滚动定位选项，我们可以利用viewDidMount钩子（FullCalendar v5+），在视图加载完成后手动滚动到第一个符合时间的事件位置：

在上面的配置中添加这段代码：

viewDidMount: function(info) {
  // 找到列表中的第一个事件元素
  const firstEvent = info.el.querySelector('.fc-list-event');
  if (firstEvent) {
    // 平滑滚动到该元素位置，确保首次加载显示6am起始区域
    firstEvent.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}

如果你的事件都是从6am之后开始的，这个操作会让页面首次加载时直接显示列表顶部（对应6am的起始位置）；如果有跨凌晨的事件，也会自然出现在列表中。

版本兼容提示 #

如果你使用的是FullCalendar v4及更早版本，API会略有差异：

• 自定义视图时，start和end函数的写法基本一致，但钩子函数需要用viewRender代替viewDidMount
• 事件元素的类名可能略有不同，需要根据实际DOM结构调整选择器

内容的提问来源于stack exchange，提问作者Sven Šindel