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
{
"type": "calendar",
"mode": "single",
"className": "rounded-md border"
}Selection Modes
Single Date
{
"type": "calendar",
"mode": "single",
"className": "rounded-md border"
}Date Range
{
"type": "calendar",
"mode": "range",
"className": "rounded-md border"
}Multiple Selection
Multiple Dates
{
"type": "calendar",
"mode": "multiple",
"className": "rounded-md border shadow-sm"
}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;
}Examples
In a Form
Form Integration
{
"type": "div",
"className": "max-w-sm space-y-4 p-4 border rounded-lg",
"children": [
{
"type": "label",
"label": "Select a date",
"className": "text-sm font-medium"
},
{
"type": "calendar",
"mode": "single",
"className": "rounded-md border"
}
]
}With Custom Styling
Custom Style
{
"type": "calendar",
"mode": "single",
"className": "rounded-xl border-2 shadow-lg"
}