日历时间段 <SlotPicker />
左边标题,右边一张预约卡:月历标出可选日期,右栏是当天的时间段。日期和时间段都能点击切换。
Template and style descriptions are currently available in Chinese only.
- Group
- 安排 · 日期与时间段
- Component
SlotPicker·#slot-picker
Good for
- 评审、培训、答疑这类要约时间的安排
- 轻柔风格里放一个产品感的小界面
Avoid when
- 真实的长期排期:用 Gantt 或 Timeline
- 日期不是真的又没标示意
Content limits
| 1 | card.title ≤ 12 字,meta ≤ 10 字符 |
| 2 | month ≤ 10 字符,days 28–31,start 为 1 号是周几(周一 = 0) |
| 3 | slots 3–5 个:time ≤ 8 字符,note ≤ 8 字 |
| 4 | 不是真实日程时 source 写“示意” |
Fields
| Field | Type | |
|---|---|---|
card · required | { title, meta } | 卡片标题与时长 |
month · required | string | 月份 |
start · required | number | 1 号是周几 |
days · required | number | 天数 |
open · required | number[] | 可选日期 |
day · required | number | 选中日期 |
slots · required | { time, note? }[] | 时间段 |
pick | number | 选中的时间段,默认 0 |
Example
<SlotPicker kicker="评审" title={['约个时间,', '一起逐页看截图']} card={{ title: '截图评审', meta: '30 分钟' }} month="2026 年 11 月" start={6} days={30} open={[3, 4, 5]} day={4} slots={[{ time: '10:00', note: '上午' }, …]} source="示意" />