跳转到内容

MiniCalendar 迷你日历

侧栏里的月历,标出哪些日子有文章。

放在侧栏的 SidebarCard 里,作为文章发布时间的索引。它不是日期选择器。

<MiniCalendar counts={{ "2026-05-18": 1, "2026-06-16": 1 }} weekStart="sun" navigable selectable />

counts 是每天的文章数,按日期列出。月历显示读者所在时区的当前月份,并标出读者的今天;构建时不知道这两样,所以浏览器里会重画一次。navigable 加上“上个月、下个月”按钮。selectable 让有文章的日子变成按钮,按下发出 ds-select 事件,内容是那天的日期,再按一次是 null。

月份和年份、两个箭头、一行星期的首字母,下面是正方形的格子。格子按栏宽等分,所以 200px 和 300px 宽的侧栏都放得下。

属性 取值
weekStart mon(默认)或 sun
year、month 固定显示某个月,而不是当前月
emphasis strong(默认)或 soft:今天变成描边的方块,有文章的日子去掉底色
tone cream(默认)或 dark,深色时今天是奶油色方块配深色字
日子 样子
有文章 8% 的墨色底,墨色文字,放在页面底色和卡片上都看得出
今天 墨色底、页面底色的字:浅色主题下是深色方块,深色主题下是奶油色方块
选中 一圈珊瑚色
其他 次要色

有文章的日子带一句只给读屏软件的说明,例如 “1 post”;今天标为当前日期。月份名称是实时区域,切换月份时会读出来。星期的首字母对读屏软件隐藏,读的是每天的日期。

MiniCalendar.astro。从交付包移植。counts 按日期而不是按某个月的第几天列出,所以能在月份之间切换;navigable、selectable 和 ds-select 事件代替 onPrev、onNext 和 onSelect。

StatList 统计列表、FilterList 筛选列表。