Calendar

A date field component that allows users to enter and edit date.

Docs API Reference

Component calendar-demo not found in registry.

Installation

Copy and paste the following code into your project:

Usage

import {
  Calendar,
  CalendarCell,
  CalendarCellTrigger,
  CalendarHeadCell,
  CalendarLabel,
  CalendarNav,
  CalendarTable,
} from "@components/ui/calendar"
<Calendar mode="single">
  {(props) => (
    <>
      <CalendarNav action="prev-month" />
      <CalendarLabel />
      <CalendarNav action="next-month" />
      <CalendarTable>
        <thead>
          <tr class="flex">
            <Index each={props.weekdays}>
              {(weekday) => <CalendarHeadCell />}
            </Index>
          </tr>
        </thead>
        <tbody>
          <Index each={props.weeks}>
            {(week) => (
              <tr>
                <Index each={week()}>
                  {(day) => (
                    <CalendarCell>
                      <CalendarCellTrigger day={day()} />
                    </CalendarCell>
                  )}
                </Index>
              </tr>
            )}
          </Index>
        </tbody>
      </CalendarTable>
    </>
  )}
</Calendar>

Examples

Range Calendar

Component calendar-range-demo not found in registry.

ButtonCard