MiHCM
primitives/@mihcm/ui·v0.21.0·stable

Calendar

Date grid powered by @daypicker/react v10. Forwards the full DayPicker prop surface with MiHCM tokenized geometry, focus, and selection styles.

ConfiguratorExamplesUsageAccessibilityApi

Use cases

  • Date selection — let users pick a single date from a calendar grid.
  • Date range — select a start and end date (e.g. leave requests, reporting periods).
  • Inline display — show a calendar permanently in a sidebar or panel.

When NOT to use

  • Known dates like birthdays → use a DatePicker text input for faster entry.
  • Time selection → Calendar handles dates only; pair with a time input if needed.

Modes

ModeDescription
singleSelect one date.
rangeSelect a start → end range. Use numberOfMonths={2} for clarity.
multipleSelect several individual dates.

DayPicker v10 API

Calendar is now powered by @daypicker/react v10. The MiHCM wrapper does not hide DayPicker capabilities; it forwards the full v10 DayPicker prop surface and only adds tokenized default class names, larger targets, and MiHCM focus/selection styling.

Use the v10 APIs directly for product-specific behavior:

CapabilityProps / APIs
Selectionmode, selected, onSelect, required, min, max, excludeDisabled
Date matchingdisabled, hidden, selected, modifiers, today
Navigationmonth, defaultMonth, onMonthChange, startMonth, endMonth, disableNavigation, hideNavigation, onPrevClick, onNextClick
Caption / layoutcaptionLayout, navLayout, reverseYears, numberOfMonths, reverseMonths, pagedNavigation, fixedWeeks, showOutsideDays, hideWeekdays, showWeekNumber
Localizationlocale, lang, dir, weekStartsOn, firstWeekContainsDate, ISOWeek, timeZone, noonSafe, numerals
Custom renderingcomponents, formatters, labels, footer
StylingclassName, classNames, style, styles, modifiersClassNames, modifiersStyles, nonce
EventsonDayClick, onDayFocus, onDayBlur, onDayKeyDown, onDayMouseEnter, onDayMouseLeave

Use @daypicker/react/locale for production locale objects, and install the relevant DayPicker add-on package when you need non-Gregorian calendars such as Persian, Buddhist, Ethiopic, Hebrew, or Hijri.

Removed v9 compatibility APIs such as fromMonth, toMonth, fromDate, toDate, initialFocus, components.Button, and deprecated class key aliases are not supported in v10. Use startMonth, endMonth, hidden, autoFocus, PreviousMonthButton, NextMonthButton, and current v10 class keys instead.

The MiHCM wrapper only supplies roomier tokenized defaults: 52px day cells, 44px circular day targets, clearer header spacing, semantic selected/today states, and accessible focus rings.

Hover and selection visuals are intentionally applied to each day button, not the table cell. This keeps single dates circular and range-middle dates discrete rounded squares instead of stretched pills.

Composition

Calendar is the low-level grid. For a trigger + popup pattern, use DatePicker which wraps Calendar in a Button + popover.