开源 · Svelte 5 · MIT 协议

一个组件,装下应用需要的每一种日历

月、周、日、年、议程五种视图,拖拽编辑、重复事件、多日历源、国际化与暗色模式。功能对标 Google / Apple / Outlook 日历,基于 Svelte 5 runes 构建,零运行时依赖。

快速开始 → GitHub
在线演示——拖动事件、框选时段、切换视图

2026/9/7 – 2026/9/13

第37周
周一
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时

整月的功能,一次装齐。

以下全部开箱即用——自然也要排成月历的样子。

01

月视图

Google 风格网格,跨天事件以长条横跨渲染。

02

周 / 日视图

时间网格,重叠事件自动分列排布。

03

年视图

12 个迷你月历,带事件密度圆点。

04

议程视图

滚动式日程列表,一目了然。

05

拖拽移动

在日期与时间格之间自由拖动事件。

06

拖拽调整时长

拖动事件底边即可改变时长。

07

框选新建

内置快速新建弹层,框选即建。

08

重复事件

支持 RRULE 子集:按日/周/月/年重复。

09

全天与跨天

独立全天栏,跨周长条无缝衔接。

10

多日历源

分组着色,可独立显示 / 隐藏。

11

“还有 N 项”弹层

溢出事件自动折叠,点击查看全部。

12

当前时间线

红色时间线实时标记此刻。

13

营业时间

非工作时段自动置灰显示。

14

周数

可选 ISO-8601 周数栏。

15

Intl 国际化

任意区域设置,内置中英文界面。

16

暗色与主题

所有颜色均为 CSS 变量,随意定制。

17

自定义渲染

用 Snippet 完全接管事件内容。

18

TypeScript · 零依赖

完整类型定义,无任何运行时依赖。