代码演示
如何引入
import { Calendar } from '@chenzy-design/svelte';日视图
日视图的日历模板，可通过 showCurrTime 控制是否显示当前时间的位置红线。
- 全天
周视图
周视图的日历模板，可通过 showCurrTime 控制是否显示当前时间的位置红线。
- 10月
- 11 周日
- 12 周一
- 13 周二
- 14 周三
- 15 周四
- 16 周五
- 17 周六
- 全天
月视图
月视图的日历模板。
- 周日
- 周一
- 周二
- 周三
- 周四
- 周五
- 周六
- 27
- 28
- 29
- 30
- 10月 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
设置周起始日
可以通过 weekStartsOn 设置周几作为每周第一天，0 代表周日，1 代表周一，以此类推。默认为周日。weekStartsOn 对月视图、周视图生效。
- 周日
- 周一
- 周二
- 周三
- 周四
- 周五
- 周六
- 27
- 28
- 29
- 30
- 10月 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
多日视图
多日视图模式。 range 必传，左闭右开。
- 10月
- 26 周六
- 27 周日
- 28 周一
- 29 周二
- 30 周三
- 全天
事件渲染用法
通过 events 传入需要渲染的事件，events 是一个由 event objects 组成的数组，具体形式请参考 events API。
- 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 可以自定义渲染日期单元格/列。需要使用绝对定位。
自定义渲染事件
- 7月
- 21 周日
- 22 周一
- 23 周二
- 24 周三
- 25 周四
- 26 周五
- 27 周六
- 全天
吃饭 🍰
睡觉 😪
打豆豆 🎮
自定义渲染单元格样式
可以通过 dateGridRender 自定义单元格的背景，月视图的文字 zIndex 默认为 3，如需完全覆盖单元格可以设置更大的 zIndex 来实现。
- 周日
- 周一
- 周二
- 周三
- 周四
- 周五
- 周六
- 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
自定义日期文案
可以通过 renderDateDisplay 自定义日期文案。
- 5月
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 全天
API 参考
Calendar
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| allDayEventsRender | 自定义日/多日/周视图下的顶部事件渲染，入参为全量 events | (events: CalendarEvent[]) => Snippet | - |
| class | 根节点自定义类名 | string | - |
| dateGridRender | 自定义单元格/列渲染，需要绝对定位 | (dateString: string, date: Date) => Snippet | - |
| displayValue | 展示日期 | Date | 当前日期 |
| events | 渲染事件，具体格式请参考 event object | CalendarEvent[] | - |
| header | 自定义头部内容 | Snippet | - |
| height | 日历高度 | string | number | 600 |
| markWeekend | 区分周末列和工作日，以灰色显示 | boolean | false |
| minEventHeight | 日视图、多日视图以及周视图下事件的最小高度 | number | Number.MIN_SAFE_INTEGER |
| mode | 初始模式，day, week, month, range | “day” | “week” | “month” | “range” | week |
| onClick | 单击日期格的回调，日视图和周视图以半小时为单位，月视图以日为单位 | (e: Event, date: Date) => void | - |
| onClose | 月视图下，展示所有 event 的卡片关闭时的回调 | (e: Event) => void | - |
| onMoreClick | 月视图下，点击「还有几项」时的回调 | (e: Event, date: Date, remaining: number) => void | - |
| range | 多日视图模式下展示的日期范围，左闭右开 | [Date, Date] | - |
| renderDateDisplay | 自定义日期文案 | Snippet<[date: Date]> | - |
| renderTimeDisplay | 自定义日/周视图下的时间文案 | (time: number) => string | - |
| scrollTop | 日视图和周视图模式下，设置展示内容默认的滚动高度 | number | 400 |
| showCurrTime | 显示当前时间 | boolean | true |
| style | 根节点内联样式，合并在 height / width 之后，可覆盖二者 | string | - |
| weekStartsOn | 以周几作为每周第一天，0 代表周日，1 代表周一，以此类推 | number | 0 |
| width | 日历宽度 | string | number | - |
与 Semi 的技术差异
Semi 的 dateGridRender / allDayEventsRender 返回 ReactNode，本库返回 Snippet（用 {#snippet} 定义后由这两个函数返回）；renderDateDisplay 在本库直接是接收 date 的 Snippet。renderTimeDisplay 返回字符串。事件外观由 event 的 children 承载：字符串直接渲染，复杂内容传 Snippet。
Event Object
events 是一个 event object 组成的数组，event object 约定格式如下：
当事件为全天事件时，若没有传入起始结束时间，则自动追加到 displayValue 的日期中；当事件不是全天事件时，起始结束时间至少传入一个才会被视为有效事件
注意
不同 event 的 key 值要求必填且唯一，以此控制事件的更新与重绘。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| allDay | 全天事件 | boolean | false |
| children | 展示内容 | string | Snippet | - |
| end | 事情结束的时间 | Date | - |
| key | required 且要求唯一 | string | - |
| start | 事情起始的时间 | Date | - |
无障碍
- 日历容器使用
role="grid"，星期 / 日期表头使用role="columnheader"，日期格子（日 / 周 / 多日视图的列、月视图的日格）使用role="gridcell"。 - 日 / 周 / 多日视图的半小时时间格可点击并带日期时间
aria-label；月视图 today 格设aria-current="date"。 - 事件标记不以颜色为唯一区分，需同时配合文案或图标传达语义。
文案规范
- 当需要显示时间时，12 小时制和 24 小时制都是可以使用的
- 如果采用 12 小时制，需要搭配 AM/PM 一起使用
- 关于月份、星期、时间的缩写使用规则，可参考缩写规范
设计变量
变量 | 默认值 | 用法 |
|---|---|---|
| --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 背景） |
显示第 1 条-第 10 条，共 10 条
- 1