迷你月历

紧凑的独立月份选择器——就是每个侧边栏里的那个小月历。可用作日期选择器,或绑定到大日历的 date 组成双栏布局。

点选日期 → 右侧日视图联动
2026年9月

2026年9月10日

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

属性

属性类型说明
bind:valueDate | null选中的日期。
bind:monthDate当前显示的月份。
eventsCalendarEvent[]有事件的日期显示圆点。
locale / firstDayOfWeekstring / Weekday语义与主日历一致。
theme'light' | 'dark' | 'auto'配色方案。
onSelect(date: Date) => void点击日期时触发。

双向联动的实现

  • 迷你 → 日视图:onSelect 把选中的日期写入 Calendar 绑定的 date。
  • 日视图 → 迷你:bind:date 让工具栏导航更新同一份状态;再用一行 $effect 让迷你月历绑定的 month 跟随即可。
  • 把 value={date} 传给迷你月历,选中的日期会保持高亮。