BetaPublic beta — Read the release notes
Solidiom
Get Started
Documentation

Calendar

Basic calendar example demonstrating core behavior.

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

Examples

import * as Calendar from "@solidiom/calendar"

;<Calendar.Root onValueChange={(date) => console.log(date)}>
  <Calendar.Header>
    <Calendar.PrevButton />
    <Calendar.Title />
    <Calendar.NextButton />
  </Calendar.Header>

  <Calendar.Grid>
    {(weeks) =>
      weeks.map((week, wi) => (
        <tr key={wi}>
          {week.map((day, di) =>
            day > 0 ? <Calendar.Cell key={`${wi}-${di}`} day={day} /> : <td key={`${wi}-${di}`} />,
          )}
        </tr>
      ))
    }
  </Calendar.Grid>
</Calendar.Root>

The Grid renders a table with keyboard navigation (Arrow keys, Home, End, PageUp/PageDown). The Cell component handles selection, focus, today highlighting, and disabled date states.

August 2026
0000001
2345678
9101112131415
16171819202122
23242526272829
303100000
View source
        /**
 * @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.
 *
 * @example
 * ```tsx
 * import * as Calendar from "@solidiom/calendar"
 *
 * <Calendar.Root onValueChange={(d) => console.log(d)}>
 *   <Calendar.Header>
 *     <Calendar.PrevButton />
 *     <Calendar.Title />
 *     <Calendar.NextButton />
 *   </Calendar.Header>
 *   <Calendar.Grid>
 *     {(weeks) => weeks.map((week) => (
 *       <tr>{week.map((day) => day > 0 ? <Calendar.Cell day={day} /> : <td />)}</tr>
 *     ))}
 *   </Calendar.Grid>
 * </Calendar.Root>
 * ```
 */

export {
  Root,
  Header,
  PrevButton,
  Title,
  NextButton,
  Grid,
  Cell,
  gregorianDateMath,
} from "./calendar"
export type {
  CalendarRootProps,
  CalendarHeaderProps,
  CalendarPrevButtonProps,
  CalendarTitleProps,
  CalendarNextButtonProps,
  CalendarGridProps,
  CalendarCellProps,
} from "./calendar"
export {
  useCalendarContext,
  type CalendarContextValue,
  type DateValue,
  type CalendarDateMathPort,
} from "./calendar-context"

// ─── RangeCalendar ─────────────────────────────────────────────────────────────

export {
  RangeRoot,
  RangeHeader,
  RangePrevButton,
  RangeTitle,
  RangeNextButton,
  RangeGrid,
  RangeCell,
} from "./range-calendar"
export type {
  RangeCalendarRootProps,
  RangeCalendarHeaderProps,
  RangeCalendarPrevButtonProps,
  RangeCalendarTitleProps,
  RangeCalendarNextButtonProps,
  RangeCalendarGridProps,
  RangeCalendarCellProps,
} from "./range-calendar"
export {
  useRangeCalendarContext,
  type RangeCalendarContextValue,
  type RangeValue,
} from "./range-calendar-context"