Calendar

A date field component that enables users to choose and edit a date.

Installation

npx shadcn@latest add @scrollxui/calendar

Usage

import { Calendar } from '@/components/ui/calendar';

const [date, setDate] = React.useState<Date | undefined>(new Date());
 
return (
  <Calendar
    mode='single'
    selected={date}
    onSelect={setDate}
    className='rounded-lg border'
  />
);

Examples

YearOrder

Disabled Days

Single month with range selection

Multiple month with range selection

Multiple months

Date Of Birth Picker

Month and Year Selector

Date & Time Picker

API Reference

Calendar

A date field component that enables users to choose and edit a date.

Props

Property	Type	Default	Description
`mode`	"single" \| "multiple" \| "range"	`"single"`	Selection mode
`selected`	Date \| Date[] \| {from: Date; to?: Date}	`-`	Selected date(s) or range
`onSelect`	function	`-`	Called on date select
`numberOfMonths`	number	`1`	Months displayed
`defaultMonth`	Date	`new Date()`	Initial month shown
`showWeekNumber`	boolean	`—`	Show week numbers
`weekStartsOn`	0 \| 1 \| ... \| 6	`—`	Week start day
`captionLayout`	"label" \| "dropdown" \| "dropdown-months" \| "dropdown-years"	`"label"`	Month/year caption style
`fromYear`	number	`currentYear-100`	Start year for dropdown
`toYear`	number	`currentYear`	End year for dropdown
`disabled`	Date[] \| function \| object	`-`	Disable dates
`components`	object	`-`	Custom subcomponents
`modifiers`	object	`-`	Custom day modifiers
`animate`	boolean	`—`	Enable animation
`footer`	ReactNode	`-`	Footer content