Mushilu-San UI Calendar
A month grid for picking a single date, with keyboard navigation.
Selector: mui-calendar
import { Calendar } from '@mushilu-san/ui/forms';Loading example…
Overview
value model holds the selected Date, and minDate and maxDate disable days outside the range. locale controls month and weekday names.
When to use
Choosing a date where the user benefits from seeing the surrounding days. Booking or scheduling, where availability is shown by range.
When not to use
Typing a date, or a date that is far in the past. Use a Date picker with a text field. Use Date picker instead.
Guidelines
Do
Set minDateandmaxDateso impossible dates cannot be chosen.Show the selected date as text nearby too.
Don't
Do not use a calendar for a date in the distant past or future where typing is faster.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
month heading | heading (level 2) | aria-live="polite", so the new month is announced. |
day | button | aria-selected on the chosen day and aria-current="date" on today. Unavailable days are aria-disabled. |
Keyboard
| Keys | Action |
|---|---|
| ArrowLeftArrowRightArrowUpArrowDown | |
| PageUpPageDown | |
| HomeEnd | |
| EnterSpace |
Name the calendar with a visible heading or a label on the control that contains it.
API
Calendar
| Name | Type | Default | Description |
|---|---|---|---|
minDate | Date | null | null | Earliest selectable date. Days before it are disabled. |
maxDate | Date | null | null | Latest selectable date. Days after it are disabled. |
locale | string | 'en-US' | BCP 47 locale used for month and weekday names. Default `en-US`. |
disabled | boolean | false | Disables the whole calendar. Accepts attribute presence, e.g. <… disabled>. |
| Name | Type | Default | Description |
|---|---|---|---|
value | Date | null | null | Selected date, or `null` when none is chosen. Two-way bindable with `[(value)]`. |
CSS parts
::part(day)::part(next-btn)::part(prev-btn)::part(root)
Tokens
--mui-color-primary--mui-color-surface--mui-color-text--mui-color-text-muted--mui-color-focus-ring--mui-touch-target