Components

Calendar

A date picker built on top of React DayPicker. Supports single date, date range, and custom disabled states.

example.tsx

April 2026

Import

tsx

import { AppCalendar } from "@/components/primitives/AppCalendar"

Examples

Date range

Set mode="range" and numberOfMonths={2} to let users select a start and end date across two months.

example.tsx

April 2026

May 2026

Date picker

Combine with AppPopover and a trigger button to build a compact date picker input.

example.tsx

With presets

Add quick-select buttons above the calendar for common relative dates like "Today" or "In a week".

example.tsx

Booked dates

Pass an array of Date objects to the disabled prop to mark specific days as unavailable.

example.tsx

April 2026

Week numbers

Enable showWeekNumber to display ISO week numbers alongside each row — useful for project planning contexts.

example.tsx

April 2026

	Su	Mo	Tu	We	Th	Fr	Sa
14
15
16
17
18

API Reference

AppCalendar passes all props through to React DayPicker. Key props are listed below.

Prop	Type	Default	Description
mode	"single" \| "range" \| "multiple"	"single"	Selection mode.
selected	Date \| DateRange \| Date[]	—	The currently selected date(s).
onSelect	function	—	Callback fired when the selection changes.
disabled	Date[] \| Matcher	—	Dates or matchers that cannot be selected.
numberOfMonths	number	1	Number of months to display side by side.
showOutsideDays	boolean	true	Show days from adjacent months.
showWeekNumber	boolean	false	Display ISO week numbers.
initialFocus	boolean	false	Focus the calendar on mount — use inside popovers.
className	string	—	Additional Tailwind classes on the root element.

Source

src/components/primitives/AppCalendar.tsx

"use client"

import { Calendar } from "../ui/calendar"

function AppCalendar(props: React.ComponentProps<typeof Calendar>) {
  return <Calendar {...props} />
}

export { AppCalendar }