Mini Calendar
A compact standalone month picker — the little calendar in every sidebar. Use it as a date picker, or wire it to a full calendar’s date to build a two-pane layout.
Pick a day → see it in the day view
S
M
T
W
T
F
S
Thu
All-day
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
9 PM
10 PM
11 PM
12 AM
Props
| Prop | Type | Notes |
|---|---|---|
bind:value | Date | null | The selected day. |
bind:month | Date | The month being displayed. |
events | CalendarEvent[] | Days containing events get a dot. |
locale / firstDayOfWeek | string / Weekday | Same semantics as the main calendar. |
theme | 'light' | 'dark' | 'auto' | Color scheme. |
onSelect | (date: Date) => void | Fires on day click. |
How the two-way link works
- Mini → day view: onSelect writes the picked day into the Calendar’s bound date.
- Day view → mini: with bind:date, toolbar navigation updates the same state; a one-line $effect keeps the mini calendar’s bound month following it.
- Passing value={date} keeps the picked day highlighted in the mini grid.