时间网格
周视图与日视图共享同一套可配置的时间网格:可见小时范围、网格密度、拖拽吸附、营业时间与实时时间线。
6:00–22:00,营业时间,周数
第37周
周一
7
周二
8
周三
9
周四
10
周五
11
周六
12
周日
13
全天
7时
8时
9时
10时
11时
12时
13时
14时
15时
16时
17时
18时
19时
20时
21时
22时
选项
| 属性 | 默认值 | 作用 |
|---|---|---|
dayStartHour / dayEndHour | 0 / 24 | 裁剪可见小时范围,范围外的事件被截断显示。 |
slotDuration | 30 | 次级网格线的分钟间隔。 |
snapDuration | 15 | 拖动、调整、框选时的吸附步长。 |
hourHeight | 48 | 每小时的像素高度,相当于缩放级别。 |
scrollToHour | 7 | 打开视图时自动滚动到的小时。 |
businessHours | null | true 表示周一至五 9–17,或传 { days, startHour, endHour }。非工作时段置灰。 |
nowIndicator | true | 今日列上的红色当前时间线,每 30 秒刷新。 |
weekNumbers | false | 在侧栏显示 ISO 周数。 |
hour12 | 跟随 locale | 强制 12/24 小时制。 |
重叠事件
重叠事件按“碰撞簇”打包分列——与 Google、Apple 日历同族的算法。释放的列会被复用:一个长事件加两个前后相接的短事件只占两列。
约束
validRange 把导航与交互限制在一个日期窗口内(窗口外的日期置灰且不可交互,翻页自动钳制)。eventOverlap={false} 会拒绝与其他事件时间冲突的拖放、调整和快速新建——预约场景的利器。
仅限本周,禁止时间冲突
周一
周二
周三
周四
周五
周六
周日
31
9月 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
10月 1
2
3
4
键盘编辑
用 Tab 聚焦事件块后:Alt+↑/↓ 按吸附步长移动,Alt+←/→ 移动一天,Alt+Shift+↑/↓ 调整时长。所有变更都会通过 aria-live 区域向屏幕阅读器播报。
全天事件栏
全天与跨天事件渲染在网格上方的独立栏中,长条精确覆盖所跨日期;超出可见范围时切平边角以示延续。