BetaPublic beta — Read the release notes
Solidiom
Get Started
Documentation

Calendar

Date selection with day/month/year views.

Package
@solidiom/calendar
Version
0.0.1-next.0
Status
stable

Generated from the package's public source.

API

CalendarCellPropsinterface

Props for Calendar Cell.

Props

day
number

children: Element

View source

CalendarContextValueinterface

Context shape shared among all calendar parts.

Props

dateMath
CalendarDateMathPort — The date math port.
focusedDate
Accessor<DateValue> — The currently focused date (for keyboard navigation).
focusedMonth
Accessor<DateValue> — The currently displayed month (for grid rendering).
isDateDisabled
(date: DateValue) => boolean — Check if a date is disabled.
isToday
(date: DateValue) => boolean — Check if a date is today.
nextMonth
() => void — Navigate to next month.
prevMonth
() => void — Navigate to previous month.
selectDate
(date: DateValue) => void — Select a date.
selectedDate
Accessor<DateValue | undefined> — The selected date(s).
setFocusedDate
(date: DateValue) => void — Set focused date (for keyboard nav).
weekStartsOn
number — Week start day (0=Sun, 1=Mon).

View source

CalendarDateMathPortinterface

Port interface for date math operations.

View source

CalendarGridPropsinterface

Props for Calendar Grid.

children: (weeks: number[][]) => Element

View source

CalendarHeaderPropsinterface

Props for the Calendar Header.

children: Element

View source

CalendarNextButtonPropsinterface

Props for Calendar NextButton.

children: Element

View source

CalendarPrevButtonPropsinterface

Props for Calendar PrevButton.

children: Element

View source

CalendarRootPropsinterface

Props for the Calendar Root component.

Props

class?
string
dateMath?
CalendarDateMathPort
defaultValue?
DateValue
isDateDisabled?
(date: DateValue) => boolean
onValueChange?
(date: DateValue) => void
value?
Accessor<DateValue | undefined>
weekStartsOn?
number

children: Element

View source

CalendarTitlePropsinterface

Props for Calendar Title.

children: Element

View source

Cellcomponent

@solidiom/calendar — Headless calendar primitive. Parts: Root, Header, PrevButton, Title, NextButton, Grid, Cell. Supports month navigation, keyboard nav, date selection, disabled dates, today highlighting. Also exports RangeCalendar — a range-selection variant with start/end/restart semantics.

                        Cell(props: CalendarCellProps): Element

Props

day
number

children: Element

View source

DateValueinterface

A date value with year, month (1-12), and day (1-31).

Props

day
number
month
number
year
number

View source

gregorianDateMathvariable

Default Gregorian date math implementation. No external dependencies.

View source

Gridcomponent

@solidiom/calendar — Headless calendar primitive. Parts: Root, Header, PrevButton, Title, NextButton, Grid, Cell. Supports month navigation, keyboard nav, date selection, disabled dates, today highlighting. Also exports RangeCalendar — a range-selection variant with start/end/restart semantics.

                        Grid(props: CalendarGridProps): Element

children: (weeks: number[][]) => Element

View source

Headercomponent

@solidiom/calendar — Headless calendar primitive. Parts: Root, Header, PrevButton, Title, NextButton, Grid, Cell. Supports month navigation, keyboard nav, date selection, disabled dates, today highlighting. Also exports RangeCalendar — a range-selection variant with start/end/restart semantics.

                        Header(props: CalendarHeaderProps): Element

children: Element

View source

NextButtoncomponent

@solidiom/calendar — Headless calendar primitive. Parts: Root, Header, PrevButton, Title, NextButton, Grid, Cell. Supports month navigation, keyboard nav, date selection, disabled dates, today highlighting. Also exports RangeCalendar — a range-selection variant with start/end/restart semantics.

                        NextButton(props: CalendarNextButtonProps): Element

children: Element

View source

PrevButtoncomponent

@solidiom/calendar — Headless calendar primitive. Parts: Root, Header, PrevButton, Title, NextButton, Grid, Cell. Supports month navigation, keyboard nav, date selection, disabled dates, today highlighting. Also exports RangeCalendar — a range-selection variant with start/end/restart semantics.

                        PrevButton(props: CalendarPrevButtonProps): Element

children: Element

View source

RangeCalendarCellPropsinterface

Props for RangeCalendar Cell.

Props

day
number

children: Element

View source

RangeCalendarContextValueinterface

Context shape shared among all RangeCalendar parts.

Props

dateMath
CalendarDateMathPort — The date math port.
dir
Accessor<"ltr" | "rtl"> — Text direction for RTL support.
focusedDate
Accessor<DateValue> — The currently focused date (for keyboard navigation).
focusedMonth
Accessor<DateValue> — The currently displayed month (for grid rendering).
highlightedEnd
Accessor<DateValue | undefined> — The date currently being hovered/focused during an in-progress selection (start chosen, end not yet committed). Used for visual highlight preview.
isDateDisabled
(date: DateValue) => boolean — Check if a date is disabled.
isInRange
(date: DateValue) => boolean — Check if a date is within the current range (inclusive).
isRangeEnd
(date: DateValue) => boolean — Check if a date is the range end.
isRangeStart
(date: DateValue) => boolean — Check if a date is the range start.
isSelecting
Accessor<boolean> — Whether a range selection is in progress (start chosen, awaiting end).
isToday
(date: DateValue) => boolean — Check if a date is today.
nextMonth
() => void — Navigate to next month.
prevMonth
() => void — Navigate to previous month.
rangeValue
Accessor<RangeValue | undefined> — The current range selection.
selectDate
(date: DateValue) => void — Handle a date click/select: start → end → restart cycle.
setFocusedDate
(date: DateValue) => void — Set focused date (for keyboard nav).
setHighlightedEnd
(date: DateValue | undefined) => void — Set the highlighted end (hover preview).
weekStartsOn
number — Week start day (0=Sun, 1=Mon).

View source

RangeCalendarGridPropsinterface

Props for RangeCalendar Grid.

children: (weeks: number[][]) => Element

View source

RangeCalendarHeaderPropsinterface

Props for the RangeCalendar Header.

children: Element

View source

RangeCalendarNextButtonPropsinterface

Props for RangeCalendar NextButton.

children: Element

View source

RangeCalendarPrevButtonPropsinterface

Props for RangeCalendar PrevButton.

children: Element

View source

RangeCalendarRootPropsinterface

Props for the RangeCalendar Root component.

Props

class?
string
dateMath?
CalendarDateMathPort
defaultValue?
RangeValue
dir?
"ltr" | "rtl"
isDateDisabled?
(date: DateValue) => boolean
onValueChange?
(range: RangeValue) => void
value?
Accessor<RangeValue | undefined>
weekStartsOn?
number

children: Element

View source

RangeCalendarTitlePropsinterface

Props for RangeCalendar Title.

children: Element

View source

RangeCellcomponent

                        RangeCell(props: RangeCalendarCellProps): Element

Props

day
number

children: Element

View source

RangeGridcomponent

                        RangeGrid(props: RangeCalendarGridProps): Element

children: (weeks: number[][]) => Element

View source

RangeHeadercomponent

                        RangeHeader(props: RangeCalendarHeaderProps): Element

children: Element

View source

RangeNextButtoncomponent

                        RangeNextButton(props: RangeCalendarNextButtonProps): Element

children: Element

View source

RangePrevButtoncomponent

                        RangePrevButton(props: RangeCalendarPrevButtonProps): Element

children: Element

View source

RangeRootcomponent

                        RangeRoot(props: RangeCalendarRootProps): Element

Props

class?
string
dateMath?
CalendarDateMathPort
defaultValue?
RangeValue
dir?
"ltr" | "rtl"
isDateDisabled?
(date: DateValue) => boolean
onValueChange?
(range: RangeValue) => void
value?
Accessor<RangeValue | undefined>
weekStartsOn?
number

children: Element

View source

RangeTitlecomponent

                        RangeTitle(props: RangeCalendarTitleProps): Element

children: Element

View source

RangeValueinterface

A range value with a start date and an optional end date.

Props

end?
DateValue
start
DateValue

View source

Rootcomponent

@solidiom/calendar — Headless calendar primitive. Parts: Root, Header, PrevButton, Title, NextButton, Grid, Cell. Supports month navigation, keyboard nav, date selection, disabled dates, today highlighting. Also exports RangeCalendar — a range-selection variant with start/end/restart semantics.

                        Root(props: CalendarRootProps): Element

Props

class?
string
dateMath?
CalendarDateMathPort
defaultValue?
DateValue
isDateDisabled?
(date: DateValue) => boolean
onValueChange?
(date: DateValue) => void
value?
Accessor<DateValue | undefined>
weekStartsOn?
number

children: Element

View source

Titlecomponent

@solidiom/calendar — Headless calendar primitive. Parts: Root, Header, PrevButton, Title, NextButton, Grid, Cell. Supports month navigation, keyboard nav, date selection, disabled dates, today highlighting. Also exports RangeCalendar — a range-selection variant with start/end/restart semantics.

                        Title(props: CalendarTitleProps): Element

children: Element

View source

useCalendarContextcontext

                        useCalendarContext(): CalendarContextValue

View source

useRangeCalendarContextcontext

                        useRangeCalendarContext(): RangeCalendarContextValue

View source