Calendar
The month grid for picking a day, used inside the date picker and on its own.
Try it
Click a day, or tab into the grid and use the arrow keys. The arrows carry on into the next month.
October 2026
Su
Mo
Tu
We
Th
Fr
Sa
Friday, October 9, 2026
Min / max
<WildCalendar
v-model="date"
/>When to use
- Use it on its own where the month should stay open, such as in a schedule editor.
- Set bounds when only some days are valid. Days outside keep their place, so the columns still line up with the weekdays.
Don’t use it
- When the day is picked from a form field. Use a date picker, which opens this calendar.
- For a start and an end. Use a date range selector.
Anatomy
Three bands on a 340px surface. Every month shows six weeks, so the calendar never changes height.
- Header: previous year, previous month, the month label, next month, next year.
- Weekday row, starting on Sunday.
- Six weeks of days, including days from the months either side.
Day states
default
today
selected
selected + today
other month
out of bounds
keyboard focus
Accessibility
The grid is one tab stop, on the chosen day or today. The month label is announced each time it changes.
| Key | What it does |
|---|---|
| Tab | Moves through the header buttons, then onto one day in the grid. |
| Arrow keys | Move a day or a week, into the next or previous month. |
| Home / End | Move to the start or end of the week. |
| Page Up / Page Down | Move a month. With Shift, a year. |
| Enter / Space | Picks the focused day. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | Date | null | null | The chosen day, controlled or uncontrolled. |
| onChange | (day: Date) => void | — | Fires with the picked day. |
| minDate / maxDate | Date | string | null | null | The first and last days that can be picked. |
| autoFocus | boolean | false | Focuses the grid on mount. |
| footer | ReactNode | — | Actions under the grid, inside the surface. |
Tokens
| Token | Value | Where it lands |
|---|---|---|
| --global-blue-1000 | #1877F2 | The selected day. White on it is 4.23:1. |
| --global-blue-1100 | #0C296A | Selected day on hover (white 13.63:1), and today’s number, 12.75:1 on its tint. |
| --global-blue-1000 | #1877F2 | The focus ring. |
| --global-blue-100 | #EBFAFF | Today’s ground. |
| --global-blue-1000 | #1877F2 | Today’s dot. Blue-1000 is only 3.96:1 on the tint, so the number takes blue-1100. |
| --global-neutral-grey-200 / -1200 | #F5F5F5 / #1D1C20 | A hovered day and its number. |
| --global-neutral-grey-1100 | #2D2B32 | An ordinary day. |
| --global-neutral-grey-700 | #C9C9CC | Days from the months either side. |
| (no token) | #4F4D55 | Weekday headers. |
| --font-size-sm | 12px | Day numbers. |
| --font-weight-medium | 475 | Day numbers. |
| --radius-lg / -md | 8px / 6px | Day cells; header buttons. |
| --shadow-lg | 0 10px 15px -3px … | The surface. |