sheengemologic ui
All components

Calendar

An always-visible locale-aware calendar with Ark-backed grid keyboard interaction.@gemologic/sheen-date · date and time

Playground

This example has no scalar controls. Its validated source remains interactive below.
Deployment date
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
<Calendar label="Deployment date" name="deploymentDate" defaultValue={createCalendarDate(2026, 9, 8)} defaultVisibleDate={createCalendarDate(2026, 9, 1)} />

Variant matrix

Deployment date
Deployment date
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10

Anatomy

Package
@gemologic/sheen-date
Source
packages/date/src/Calendar.tsx
Tokens
  • --sheen-color-bg
  • --sheen-color-accent
  • --sheen-color-focus-ring

Accessibility

Role: application calendar gridKeyboard: Arrow keys, PageUp, PageDown, Home, End, Enter, Space

Do

  • Provide defaultVisibleDate for empty SSR output near the application's working date.

Do not

  • Do not derive initial visible dates from the browser clock during hydration.

Generated props

NameTypeDefaultDescription
label *string—Required visible calendar label.
valueCalendarDate | null—App-owned Sheen CalendarDate, or null for no selection.
defaultValueCalendarDate | null—Initial uncontrolled selection.
onValueChange(value: CalendarDate | null) => void—Receives requested Sheen-owned selection changes.
minValueCalendarDate—Earliest selectable calendar date.
maxValueCalendarDate—Latest selectable calendar date.
isDateUnavailable(value: CalendarDate) => boolean—Marks otherwise in-range dates unavailable using Sheen CalendarDate values.
defaultVisibleDateCalendarDate—Deterministic initially visible month; empty calendars otherwise use 2000-01-01.
localestring—Explicit BCP 47 locale, defaulting to theme context.
calendarstring—Optional Unicode calendar identifier affecting presentation and interaction, not the stored ISO date.
namestring—Native form field name for the YYYY-MM-DD projection.
formstring—Optional external form owner.
requiredbooleanfalseMarks the calendar selection required for accessible semantics.
disabledbooleanfalsePrevents focus and selection.
readOnlybooleanfalseAllows inspection while rejecting selection changes.
Native Solid/HTML attributes remain available and are omitted from this authored-prop view.