vkurko/calendar 时间线高度与时间间隔配置指南

在日程管理类应用中，时间线视图的高度和间隔配置直接影响用户体验。vkurko/calendar 项目提供了两个关键参数来精确控制时间线的显示效果。

核心配置参数

slotDuration 参数

这个参数决定了时间线视图中每个时间间隔的时长。默认情况下，时间线会以1小时为间隔显示刻度（如1:00、2:00等）。开发者可以通过修改这个参数来调整时间间隔的密度。

该参数接受ISO8601持续时间格式的字符串，例如：

• '00:30:00' 表示30分钟间隔
• '01:00:00' 表示1小时间隔（默认值）
• '00:15:00' 表示15分钟间隔

slotHeight 参数

此参数控制每个时间间隔在视觉上的高度（以像素为单位）。默认值为40px，增大这个值可以扩展每个时间段的高度，使界面更加宽松易读；减小则可以在有限空间内显示更多时间段。

实际应用场景

1. 高密度日程显示：对于需要展示大量紧凑日程的场景，可以设置较小的slotHeight值（如30px）配合较短的slotDuration（如15分钟间隔）

2. 教学时间表：学校课程表通常以45分钟或1小时为单位，可以设置slotDuration为'00:45:00'，并适当增加slotHeight以提高可读性

3. 医疗预约系统：医院预约系统可能需要精确到15分钟间隔，同时需要较大高度显示患者信息，此时可以组合配置这两个参数

最佳实践建议

1. 考虑用户设备屏幕尺寸，移动端可能需要比桌面端更大的slotHeight值

2. 时间间隔不宜过密，一般不小于15分钟，否则会导致界面拥挤

3. 当调整slotHeight时，应同步考虑事件项的视觉高度，保持整体协调

4. 可以通过CSS进一步自定义时间线的外观，如刻度线颜色、字体大小等

通过合理配置这两个参数，开发者可以创建出既美观又实用的时间线视图，满足不同业务场景的需求。