Calendar
纯事件展示日历，对齐 Semi Design Calendar。四视图 mode=day/week/month/range：day 单日时间轴（左时间列 + 单日列，25×2 半小时可点击格 + 绝对定位事件）；week 星期表头 + 7 列 DayCol，跨天事件走顶部全天区（parseWeekSpanEvents）；range 结构同 week，列数=range 天数（左闭右开），跨天走 parseSpanEvents；month 6×7 网格，跨天条走 getMonthEvents，每格超额显示「还有 N 项」并用 Popover 弹卡片。displayValue 决定展示锚点；onClick 回调点击的精确时间点（日/周精确到半小时，月精确到日）。showCurrTime 当前时间红线（当天列，每 30s 刷新）。事件定位全部来自 @chenzy-design/core 纯算法（getDailyEvents/parseWeekSpanEvents/parseSpanEvents/getMonthEvents/calcRowHeight/allDayEventMap/getPos），本组件只把数值位置转成内联样式。事件外观由 event.children 承载（字符串直出 / snippet render），对齐 Semi children。头部对齐 Semi：无默认导航，仅当传入 header 时渲染自定义头部。
如何引入
import { Calendar } from '@chenzy-design/svelte';日视图
mode="day" 日视图时间轴
- 全天
周视图
mode="week" 周视图时间轴
- 7月
- 12 周日
- 13 周一
- 14 周二
- 15 周三
- 16 周四
- 17 周五
- 18 周六
- 全天
月视图
mode="month" 月视图网格
- 周日
- 周一
- 周二
- 周三
- 周四
- 周五
- 周六
- 28
- 29
- 30
- 7月 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
- 31
- 8月 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
设置周起始日
weekStartsOn 设定每周第一天（0=周日 … 6=周六），对月 / 周视图生效
- 周日
- 周一
- 周二
- 周三
- 周四
- 周五
- 周六
- 28
- 29
- 30
- 7月 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
- 31
- 8月 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
多日视图
mode="range" range 必传，左闭右开
- 7月
- 26 周六
- 27 周日
- 28 周一
- 29 周二
- 30 周三
- 全天
事件渲染用法
mode 切换 + DatePicker 联动 displayValue + 10 个事件（children 内联样式块），minEventHeight 控制最小高
- 7月
- 21 周日
- 22 周一
- 23 周二
- 24 周三
- 25 周四
- 26 周五
- 27 周六
- 全天
- 6月25日 14:45 ~ 7月26日 6:18
- 7月18日 10:00 ~ 7月30日 8:00
- 7月19日 20:00 ~ 7月23日 14:00
- 7月25日 8:00 ~ 7月27日 6:00
- 7月21日 6:00 ~ 7月25日 6:00
- 7月26日 10:00 ~ 7月27日 16:00
- 7月22日 全天
- 7月22日 9:00 ~ 7月23日 23:00
- 7月23日 8:32
- 7月23日 14:30-20:00
自定义渲染事件
dateGridRender 在某列绝对定位塞事件块（吃饭 / 睡觉 / 打豆豆），需绝对定位 top/height
- 7月
- 21 周日
- 22 周一
- 23 周二
- 24 周三
- 25 周四
- 26 周五
- 27 周六
- 全天
自定义渲染单元格样式
dateGridRender 给重要日期铺一层背景（需绝对定位）
- 周日
- 周一
- 周二
- 周三
- 周四
- 周五
- 周六
- 30
- 7月 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
- 31
- 8月 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
自定义日期文案
renderDateDisplay 用 Avatar 渲染周视图日期头
- 5月
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 全天
点击回调
onClick 回调点击的精确时间点（日 / 周精确到半小时）
- 7月
- 12 周日
- 13 周一
- 14 周二
- 15 周三
- 16 周四
- 17 周五
- 18 周六
- 全天
周末标识与「还有 N 项」
markWeekend 区分周末 + Tag 上色事件 + onMoreClick 处理溢出
- 周日
- 周一
- 周二
- 周三
- 周四
- 周五
- 周六
- 31
- 6月 1
- 2
- 3
- 4
- 5
- 6
- 周会
- 7
- 8
- 9
- 10 还有 2 项
- 11
- 12
- 13
- 设计评审
- 需求对齐
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 发版
- 28
- 29
- 30
- 7月 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
API 参考
Calendar
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
displayValue | 展示锚点日期（决定展示的天/周/月） | Date | new Date() |
range | mode='range' 时必传，左闭右开 [start, end) | [Date, Date] | undefined |
header | 自定义头部内容（对齐 Semi header；缺省不渲染头部） | Snippet | undefined |
events | 事件列表（key 必填且唯一） | CalendarEvent[] | [] |
mode | 视图模式 | 'day' | 'week' | 'month' | 'range' | 'week' |
showCurrTime | 显示当前时间红线（日/周/多日视图，当天列） | boolean | true |
weekStartsOn | 一周起始(0=周日) | 0|1|2|3|4|5|6 | 0 |
scrollTop | 日/周视图默认滚动区高度（px） | number | 400 |
markWeekend | 区分周末列（灰底） | boolean | false |
minEventHeight | 日/周/多日视图事件块最小高度（px） | number | Number.MIN_SAFE_INTEGER |
width | 日历整体宽度 | number | string | undefined |
height | 日历整体高度 | number | string | 600 |
onClick | 点击日期格（对齐 Semi function(e, date)）：日/周视图精确到半小时，月视图精确到日 | (e: Event, date: Date) => void | undefined |
onClose | 月视图 +N 卡片关闭回调（对齐 Semi function(e)） | (e: Event) => void | undefined |
onMoreClick | 月视图点「还有 N 项」回调（对齐 Semi function(e, date, remaining)） | (e: Event, date: Date, remaining: number) => void | undefined |
renderTimeDisplay | 自定义日/周视图时间文案（返回字符串即可） | (hour: number) => unknown | undefined |
renderDateDisplay | 自定义 week/range 视图日期表头（接收 date 的 Snippet，对齐 Semi ReactNode） | Snippet<[Date]> | undefined |
dateGridRender | 自定义单元格/列额外内容（dateString = date.toString()，对齐 Semi） | (dateString: string, date: Date) => Snippet | null | undefined | undefined |
allDayEventsRender | 自定义顶部全天区渲染 | (events: CalendarEvent[]) => Snippet | null | undefined | undefined |
Events
| 事件 | 载荷 | 说明 |
|---|---|---|
onClick | — | 点击日期格（日/周半小时、月日） |
onMoreClick | — | 月视图点「还有 N 项」 |
onClose | — | 月视图 +N 卡片关闭 |
Slots
| 名称 | 说明 |
|---|---|
header | 自定义头部内容（对齐 Semi header） |
Accessibility
- 根容器 role=grid + aria-label（取标题）。时间轴视图每列 role=gridcell（含 aria-label 日期），半小时格为 <button>（aria-label=日期+时:分）。week/range 视图有日期表头 role=columnheader（day 视图对齐 Semi 无列头）。month 视图：星期表头 role=columnheader，日格 role=gridcell，today 格 aria-current=date，日格可点击（Enter/Space）。月视图「还有 N 项」用 Popover（trigger=click，showCloseButton，title=日期），关闭回调 onClose。
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-calendar-color-bg | var(--cd-color-bg-2) | Semi $color-calendar-bg（时间列 .time-items 背景） |
--cd-calendar-color-bg-active | var(--cd-color-primary) | Semi $color-calendar-bg-active（今日日期 .today-date 实底） |
--cd-calendar-color-curr-border | var(--cd-color-danger) | Semi $color-calendar_curr-border（当前时间线 .grid-curr-line border） |
--cd-calendar-color-currcircle-bg-default | var(--cd-color-danger) | Semi $color-calendar_currCircle-bg-default（当前时间原点 .grid-curr-circle 底） |
--cd-calendar-color-date-text-default | var(--cd-color-text-0) | Semi $color-calendar_date-text-default（当月日期 .month-same 文字） |
--cd-calendar-color-day-border | var(--cd-color-border) | Semi $color-calendar_day-border（网格 / 时间轴描边） |
--cd-calendar-color-day-text-default | var(--cd-color-text-2) | Semi $color-calendar_day-text-default（星期 / 时间列 / 非当月文字） |
--cd-calendar-color-sticky-bg | var(--cd-color-bg-2) | Semi $color-calendar_sticky-bg（.sticky-top / .sticky-left 背景） |
--cd-calendar-color-text-active | var(--cd-color-bg-1) | Semi $color-calendar-text-active（今日日期 .today-date 文字） |
--cd-calendar-color-weekend-bg | var(--cd-color-fill-0) | Semi $color-calendar_weekend-bg（.weekend 背景） |