Calendar

A standalone date picker grid built without an external primitive. Supports controlled and uncontrolled selection, min/max bounds, and custom disabled-date predicates.

Import


import { Calendar } from "chunks-ui";

Basic Usage


<Calendar />

March 2026

Controlled


function ControlledCalendar() {
  const [date, setDate] = useState<Date | null>(null);
 
  return (
    <Calendar value={date} onValueChange={setDate} />
  );
}

March 2026

No date selected

Disabled Dates

Use min/max to set a date range, or isDateDisabled to disable individual dates with a predicate:


const today = new Date();
const isWeekend = (date: Date) => date.getDay() === 0 || date.getDay() === 6;
 
<Calendar
  min={today}
  isDateDisabled={isWeekend}
/>

March 2026

Calendar Props

Prop	Type	Default	Description
`value`	`Date \| null`	—	Controlled selected date
`defaultValue`	`Date \| null`	`null`	Initial selected date (uncontrolled)
`onValueChange`	`(date: Date \| null) => void`	—	Called when the selected date changes
`min`	`Date`	—	Earliest selectable date (inclusive)
`max`	`Date`	—	Latest selectable date (inclusive)
`isDateDisabled`	`(date: Date) => boolean`	—	Predicate to disable individual dates
`className`	`string`	—	Additional CSS classes

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa