@corvu-next/calendar

Date picker calendar component for SolidJS 2.0 with single, multiple, and range selection modes.

Note: This is the Solid 2.0 fork of corvu. It targets [email protected].

Features

• Single, multiple, and range date selection modes
• Full keyboard navigation (Arrow keys, Page Up/Down, Home, End)
• Disabled days support via predicate function
• Fixed weeks option for consistent calendar height
• Multi-month display
• Children callback provides weekdays, weeks, and months for full layout control
• Locale-aware formatting

Installation

npm install @corvu-next/calendar
# or
pnpm add @corvu-next/calendar

Usage

import Calendar from '@corvu-next/calendar'

function MyCalendar() {
  return (
    <Calendar.Root mode="single">
      {({ weekdays, weeks }) => (
        <>
          <Calendar.Nav action="prev">←</Calendar.Nav>
          <Calendar.Label />
          <Calendar.Nav action="next">→</Calendar.Nav>
          <Calendar.Table>
            <thead>
              <tr>
                {weekdays().map((day) => (
                  <Calendar.HeadCell>{day}</Calendar.HeadCell>
                ))}
              </tr>
            </thead>
            <tbody>
              {weeks().map((week) => (
                <tr>
                  {week.map((day) => (
                    <Calendar.Cell day={day}>
                      <Calendar.CellTrigger day={day}>
                        {day.day}
                      </Calendar.CellTrigger>
                    </Calendar.Cell>
                  ))}
                </tr>
              ))}
            </tbody>
          </Calendar.Table>
        </>
      )}
    </Calendar.Root>
  )
}

API

| Component | Description | |-----------|-------------| | Calendar.Root | Container. Props: mode (single/multiple/range), value/onValueChange, disabled, fixedWeeks, numberOfMonths. Children callback provides weekdays, weeks, months. | | Calendar.Label | Displays the current month/year label. | | Calendar.Nav | Navigation button. Props: action (prev/next). | | Calendar.Table | Semantic table wrapper for the calendar grid. | | Calendar.HeadCell | Table header cell for weekday names. | | Calendar.Cell | Table cell wrapping a single day. | | Calendar.CellTrigger | Interactive button for selecting a day. |

Further Reading

This package is part of corvu-next, a collection of unstyled, accessible and customizable UI primitives for SolidJS 2.0.