Calendar

A reusable calendar component with three selection modes: single date, date range (with side-by-side months), and multi-select. Supports minimum/maximum dates, custom disabled/highlighted modifiers, configurable week start day, locale-aware formatting, and outside days display. Used internally by DatePicker.

Form Inputscalendardaterangepickerscheduleform

Single date

import { Calendar } from '@primstack/ui/calendar'

<Calendar value={date} onChange={setDate} minDate={new Date()} />

Date range

import { Calendar } from '@primstack/ui/calendar'

<Calendar mode="range" value={range} onChange={setRange} numberOfMonths={2} />

Multi-select

import { Calendar } from '@primstack/ui/calendar'

<Calendar mode="multiple" value={dates} onChange={setDates} max={5} />

Related Components