Calendar
Form ControlsStable
Date picker calendar built on react-day-picker. Supports single date, range, and multi-month modes.
Quick Import
import { Calendar } from "@cohere-ai/waypoint-ui/calendar";Live Preview
Loading Calendar...
Props
| Name | Type | Default | Description |
|---|---|---|---|
mode | 'single' | 'multiple' | 'range' | - | Selection mode (from react-day-picker) |
selected | Date | DateRange | Date[] | - | Selected date(s) |
onSelect | function | - | Callback when selection changes |
showOutsideDays | boolean | true | Show days from adjacent months |
captionLayout | string | 'label' | Caption layout (from react-day-picker) |
buttonVariant | Button variant | 'ghost' | Variant applied to nav buttons |
disabled | Date | function | - | Dates to disable |
numberOfMonths | number | - | Number of months to display |
Examples
Single Date Picker
Calendar for selecting a single date
1 import { Calendar } from '@cohere-ai/waypoint-ui/calendar'; 2 3 const [date, setDate] = React.useState<Date | undefined>(); 4 5 <Calendar mode="single" selected={date} onSelect={setDate} />
Date Range Picker
Calendar for selecting a date range across two months
1 import { Calendar } from '@cohere-ai/waypoint-ui/calendar'; 2 3 <Calendar 4 mode="range" 5 selected={range} 6 onSelect={setRange} 7 numberOfMonths={2} 8 />
Additional Resources
Accessibility
Keyboard Navigation
Arrow keys navigate dates. Enter to select. Page Up/Down for months.
Note: RTL supported — carets flip direction automatically.
Found an Issue?
If you've encountered a bug or have feedback about the Calendar component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.