MiniCalendar
Compact month grid. Standalone in a card, or the calendar half of DateRangePicker.
Component behavior
MiniCalendar renders a calendar grid and tracks the displayed month. Selection is controlled through props and callbacks. DatePicker, DateRangeField, and DateRangePicker add selection behavior and surrounding controls.
- Permanently visible calendars in scheduling or booking views.
- Application-controlled selection, unavailable days, or date badges.
- Read-only date or range highlighting without an
onSelecthandler.
DatePicker: the task requires typed date entry and a calendar popover.
DateRangeField: a form control must manage range selection.
DateRangePicker: the task requires presets and a toolbar trigger.
Props
The displayed month uses month, defaultMonth, and onMonthChange. Without these props, the initial month derives from rangeStart, then value, then today. Selection is controlled separately: value, rangeStart, and rangeEnd mark cells, while onSelect passes the clicked date at local midnight.
| Prop | Type | Default | Description |
|---|---|---|---|
month | Date | — | Controlled displayed month. Any day within the month works; the header reads its month and year. |
defaultMonth | Date | — | Initial uncontrolled month. Defaults to rangeStart, then value, then the current month. Evaluated on first render. |
onMonthChange | (month: Date) => void | — | Fires on the prev/next arrows and when a click on a spillover day navigates. Receives the first of the new month. |
value | Date | null | — | Highlighted date in single-selection mode. Does not restrict onSelect. |
rangeStart | Date | null | — | Range start highlight (range mode). Endpoints are highlighted as selected, days strictly between them as in-range. |
rangeEnd | Date | null | — | Highlighted range end. Null highlights only the start. Reversed boundaries are normalized for display. |
onSelect | (day: Date) => void | — | Called with the clicked day at local midnight. Fires for spillover days too, after the grid has navigated to their month. |
Examples
Standalone
The grid contains six rows and 42 cells. Weeks run Monday to Sunday. Adjacent-month days use secondary styling. Selecting an adjacent-month day changes the displayed month and calls onSelect.
Single selection
Pass the selected date as value and update state through onSelect. Each day is a button with a date label and aria-pressed. The 42 cells use normal Tab navigation; arrow-key navigation is not provided.
Range highlighting
Range selection uses controlled endpoints. The first click sets the start; the second sets the end. Sort reversed endpoints before storing them. rangeEnd={null} displays a partial selection.
Controlled month
With a controlled month, navigation calls onMonthChange and waits for the parent to update the prop. Use this to synchronize calendars or load data before changing months.
import { MiniCalendar } from "@solarius/onset";
import type { MiniCalendarProps } from "@solarius/onset";