svelte5plus·calendar GitHub

事件与日历

事件就是普通对象。日历源（sources）负责给事件分组、统一配色，并支持整组显示/隐藏——就像 Google 日历左侧的日历列表。

事件对象

const event: CalendarEvent = {
  id: 'evt-42',                          // unique & stable
  title: 'Quarterly planning',
  start: new Date(2026, 7, 13, 9, 30),   // inclusive
  end: new Date(2026, 7, 13, 11, 0),     // exclusive
  allDay: false,
  color: 'purple',                       // palette name or any CSS color
  calendarId: 'work',                    // groups it under a source
  location: 'Room 3',
  description: 'Bring the roadmap.',
  meta: { anything: 'you like' }         // carried through untouched
};
字段说明
id必填。拖拽编辑会按 id 写回你的数组。
start / end本地时间的 Date 对象；end 为开区间。跨越午夜的事件会自然跨天渲染。
allDay渲染到全天栏或月视图长条；忽略具体时间，范围对齐到整天。
color10 个调色板名称之一（graphite、red、orange、yellow、green、teal、blue、indigo、purple、pink），或任意 CSS 颜色如 #7c3aed。
calendarId关联到某个日历源；未自行设置颜色时继承源的颜色。
editable按事件覆盖是否允许拖拽编辑。
recurrence / exdates见「重复事件」章节。

日历源

传入 sources 数组，事件通过 calendarId 关联。切换某个源的 visible 即可一次性隐藏该组全部事件：

按日历分组显示/隐藏

2026年9月

周一
周二
周三
周四
周五
周六
周日
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
颜色优先级 — event.color → source.color → 主题强调色。调色板颜色会在明暗主题间自动适配。