FullCalendar 实现跨午夜时间段的日视图展示

背景介绍

在实际业务场景中，特别是酒店管理、医疗护理和夜间活动调度等领域，经常需要处理跨越午夜的时间段。传统日历组件通常以24小时为界分割日期，这会导致一个连续的业务时段被分割到两天显示，给用户带来认知上的不便。

核心需求分析

FullCalendar作为一款功能强大的日历组件，需要支持以下特殊场景：

1. 将次日凌晨时段（如00:00-03:00）显示在前一天的视图中
2. 保持业务时段的连续性，避免因日历日切换造成的视觉割裂
3. 自定义日视图的时间范围，如08:00至次日02:00

技术实现方案

FullCalendar提供了slotMaxTime参数来解决这个问题。该参数通常用于设置日视图的结束时间，但它的设计允许设置超过24小时的值来实现跨日显示。

关键参数说明

• slotMaxTime：可以接受超过24小时的时间值
• slotMinTime：设置日视图的起始时间
• slotDuration：控制时间刻度的间隔

配置示例

{
  slotMinTime: '08:00', // 日视图从早上8点开始
  slotMaxTime: '26:00', // 26小时表示次日2点结束（24+2）
  slotDuration: '01:00' // 每小时一个刻度
}

实际应用场景

1. 酒店房态管理：将凌晨的入住/退房记录与前一天关联显示
2. 医院值班表：完整展示医护人员的夜班时段
3. 夜场活动安排：保持派对或演出活动的完整时间线
4. 跨日运输调度：显示持续到凌晨的物流运输计划

注意事项

1. 时间计算采用24小时制，超过24小时的部分会自动换算
2. 26:00表示次日凌晨2点，30:00则表示次日凌晨6点
3. 需要合理设置slotMinTime和slotMaxTime的差值，避免视图过长
4. 建议配合scrollTime参数控制初始滚动位置

最佳实践建议

1. 对于常规业务场景，建议设置26:00（次日2点）作为默认结束时间
2. 在移动端使用时，考虑缩短显示范围以提升用户体验
3. 配合事件渲染的视觉样式，突出显示跨午夜的特殊时段
4. 在时间轴头部添加日期提示，避免用户混淆

通过这种配置方式，FullCalendar可以完美支持各类需要跨午夜显示的业务场景，保持业务时间段的完整性，提升用户体验。