Calendar
PreviewA date field component that allows users to enter and edit date.
Single
January 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Popover
Range
January 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Range Multiple Months
January 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
February 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Hidden Days
May 2024
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Disabled Days
May 2024
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
import { Calendar } from "@ngrok/mantle/calendar";
<Calendar
mode="single"
selected={date}
onSelect={setDate}
/>API Reference
The Calendar is built on top of React DayPicker.