Calendar

Installation

pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/calendar

Anatomy

Calendar
├── CalendarViewControl
│   ├── CalendarPrevTrigger
│   ├── CalendarViewDate
│   └── CalendarNextTrigger
└── CalendarTable
    ├── CalendarWeekDays
    └── CalendarTableDays

Usage

import {
  Calendar,
  CalendarNextTrigger,
  CalendarPrevTrigger,
  CalendarTable,
  CalendarTableDays,
  CalendarViewControl,
  CalendarViewDate,
  CalendarWeekDays,
} from "@/components/ui/calendar";

<Calendar>
  <CalendarViewControl>
    <CalendarPrevTrigger />
    <CalendarViewDate />
    <CalendarNextTrigger />
  </CalendarViewControl>
  <CalendarTable>
    <CalendarWeekDays />
    <CalendarTableDays />
  </CalendarTable>
</Calendar>

Controlled

Examples

Date Range

Month and Year Selector

With Presets

Multiple Months

Min and Max

Use the min and max props with parseDate to restrict the selectable date range.

Select Today

Fixed Weeks

Use the fixedWeeks prop to always display 6 weeks in the calendar, preventing layout shifts when navigating between months.

Booked Dates

Use the isDateUnavailable prop to mark specific dates as unavailable.

Custom Cell Size

Use [--cell-size:--spacing("value")] to set the size of the calendar cells.

Breakpoint utilities change the cell size at different screen sizes.

  md:[--cell-size:--spacing(10)] lg:[--cell-size:--spacing(12)]

API Reference

Calendar

Root component. Manages date view, selection, and navigation.

CalendarViewControl

Holds prev/next buttons and month/year selects.

CalendarMonthSelect

Month selector dropdown. Uses NativeSelect internally.

CalendarYearSelect

Year selector dropdown.

CalendarTable

Table layout for the calendar day grid.

CalendarWeekDays

Header row with week day names (Sun–Sat).

CalendarTableDays

Body with day cells for the current month.

CalendarTableNextMonth

Body for additional month(s). Use with numOfMonths for multi-month layout.

CalendarTableCell

Single day cell. Clickable for selection. Shows disabled/outside styling.

parseDate

Utility for parsing dates. Use with min, max, value, and defaultValue.

import { parseDate } from "@/components/ui/calendar";
 
// Parse from Date, string, or timestamp
parseDate(new Date());
parseDate("2024-01-15");
parseDate(Date.now());

For a complete list of props, see the Ark UI documentation.