ObjectUIComponentsForm
Calendar
Date selection component with single, multiple, and range modes
The Calendar component allows users to select dates in various modes including single date, multiple dates, or date ranges.
Basic Usage
Simple Calendar
Selection Modes
Single Date
Date Range
Multiple Selection
Multiple Dates
Schema
interface CalendarSchema {
type: 'calendar';
// Selection
mode?: 'single' | 'multiple' | 'range'; // Selection mode (default: 'single')
defaultValue?: Date | Date[]; // Default selected date(s)
value?: Date | Date[]; // Controlled selected date(s)
// Constraints
minDate?: Date | string; // Minimum selectable date
maxDate?: Date | string; // Maximum selectable date
disabled?: boolean; // Whether calendar is disabled
// Events
onChange?: (date: Date | Date[] | undefined) => void; // Date change handler
// Styling
className?: string; // Tailwind CSS classes
// Base properties
id?: string;
visible?: boolean | string;
testId?: string;
}