Calendar

import { today, getLocalTimeZone } from '@internationalized/date';

<Calendar
  aria-label="Pick a date"
  defaultValue={today(getLocalTimeZone())}
  onChange={(d) => console.log(d.toString())}
/>

<RangeCalendar aria-label="Pick a range" />

Install: @helixui/core

import { Calendar, RangeCalendar } from '@helixui/core'

status: stable · since: 0.1.0

Tags: date, picker, month-view, i18n

Anatomy

[<] May 2026 [>]
Su Mo Tu We Th Fr Sa
             1  2  3
 4  5  6  7  8  9 10
11 12 13 14 15 16 17  ← selected highlighted
18 19 20 21 22 23 24
25 26 27 28 29 30 31

Layout

display — block
width — content
height — content
intrinsicSize — ~280×320px (month grid)
stackable — false
fullBleed — false

Visual

A 7-column grid with a previous/next month header. Day cells are square; today shows a ring; selected day fills with brand color; hover tints with action.brand.subtle. Range mode highlights the span between two anchors.

Props

Name	Type	Default	Description
`value`	`DateValue`	—	Controlled selected date.
`defaultValue`	`DateValue`	—	Uncontrolled initial selection.
`minValue`	`DateValue`	—	Earliest selectable date.
`maxValue`	`DateValue`	—	Latest selectable date.
`isDisabled`	`boolean`	`false`	Disable the entire calendar.
`isReadOnly`	`boolean`	`false`	Block selection but keep navigation.
`onChange`	`(date: DateValue) => void`	—	Selection change handler.

Tokens used

color.bg.surface.default, color.bg.action.neutral.default, color.bg.action.brand.default, color.bg.action.brand.subtle, color.border.default, color.border.focus, color.text.primary, color.text.secondary, color.text.muted, color.text.action.brand, color.text.on.brand, radius.md, radius.sm, space.1, space.2, space.3, font.family.sans, font.size.xs, font.size.sm, font.size.md, font.weight.medium, font.weight.semibold

Accessibility

Role: application

Keyboard

Key	Action
`ArrowKeys`	Move focus by day.
`PageUp`	Previous month.
`PageDown`	Next month.
`Home`	Start of week.
`End`	End of week.
`Enter`	Select date.

Notes

Built on react-aria-components Calendar — full a11y, RTL, calendar systems, internationalization.
Use @internationalized/date to construct DateValue objects (parseDate, today, etc.).

Composes with

Component	Relation	Note
`Popover`	`parent`	Often rendered inside a Popover triggered by a TextInput.
`TextInput`	`sibling`	Common pairing — input shows formatted date, calendar picks it.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

simple date picker

“pick a single date”

<Calendar value={date} onChange={setDate} />

date range

“pick a start and end date”

<RangeCalendar value={range} onChange={setRange} />