svelte5plus·calendar GitHub

自定义渲染

借助 Svelte 5 的 snippet，你可以接管日历的渲染——事件内容、附加工具栏控件，甚至整个工具栏。

eventContent snippet

在 <Calendar> 内声明 eventContent snippet，即可替换所有事件条与事件块的默认内容。它接收 EventInstance——包含事件数据、该次出现的具体时间与解析后的颜色：

按日历源加表情前缀

2026/9/7 – 2026/9/13

周一
7
周二
8
周三
9
周四
10
周五
11
周六
12
周日
13
全天
1时
2时
3时
4时
5时
6时
7时
8时
9时
10时
11时
12时
13时
14时
15时
16时
17时
18时
19时
20时
21时
22时
23时
0时

自定义新建与详情 UI

内置弹层只是默认行为，不是束缚：一旦提供 onSelect / onDateClick，快速新建弹层就会让位；提供 onEventClick 则替换详情弹层。之后任何 UI 都可以——模态框、抽屉、独立路由页。下面的示例把它们换成了居中的新建对话框和右侧详情抽屉：

自己的对话框与抽屉

2026/9/7 – 2026/9/13

周一
7
周二
8
周三
9
周四
10
周五
11
周六
12
周日
13
全天
1时
2时
3时
4时
5时
6时
7时
8时
9时
10时
11时
12时
13时
14时
15时
16时
17时
18时
19时
20时
21时
22时
23时
0时
只想换皮肤？ — 如果只是想调整默认弹层的外观，用 CSS 变量和 .s5c-popover 类名换肤即可，无需整体替换。

附加工具栏内容

toolbarEnd snippet 渲染在内置工具栏右侧——适合放筛选器或“新建日程”按钮。

无头模式

<script lang="ts">
  import { Calendar, type CalendarView } from 'svelte5plus-calendar';
  let view = $state<CalendarView>('week');
  let date = $state(new Date());
</script>

<!-- Bring your own toolbar: hide the built-in one and drive the bindables -->
<nav>
  <button onclick={() => (date = new Date())}>Today</button>
  <select bind:value={view}>
    <option value="week">Week</option>
    <option value="month">Month</option>
  </select>
</nav>

<Calendar bind:view bind:date header={false} events={[]} />

所有布局算法（时间网格分列、周行分段、重复展开）同时以纯函数导出——你完全可以基于它们构建全新的自定义 UI。