svelte5plus·calendar GitHub

快速开始

svelte5plus-calendar 是基于 Svelte 5 runes 构建的全功能日历组件——零运行时依赖、TypeScript 优先、每个像素都可以定制主题。

安装

npm install svelte5plus-calendar

需要 Svelte 5。样式表随组件自动引入，无需单独导入 CSS。

第一个日历

<script lang="ts">
  import { Calendar, type CalendarEvent } from 'svelte5plus-calendar';

  let events = $state<CalendarEvent[]>([
    {
      id: '1',
      title: 'Kickoff meeting',
      start: new Date(2026, 7, 13, 10, 0),
      end: new Date(2026, 7, 13, 11, 0)
    }
  ]);
</script>

<!-- The calendar fills its parent — give the wrapper a height. -->
<div style="height: 640px">
  <Calendar bind:events view="month" locale="en" />
</div>
尺寸 — 日历会撑满父元素，因此外层容器需要一个明确的高度（或处于 flex / grid 布局中）。

在线示例

下面是真实渲染效果——点击 Code 按钮查看该示例的完整源码：

你好，日历

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

三个可双向绑定的属性

日历的绝大多数用法都围绕三个可 bind 的属性展开：

属性类型用途
bind:eventsCalendarEvent[]你的数据。拖拽编辑的结果会写回该数组。
bind:dateDate当前聚焦日期——工具栏的导航按钮会更新它。
bind:view'day' | 'week' | 'month' | 'year' | 'agenda'当前视图——也可以随时从你自己的 UI 中切换。

接下来