Calendar
A fully featured date picker with keyboard navigation, accessibility support, and customizable styling.
Installation
Install the Calendar component using the nocta-ui CLI:
npx @nocta-ui/cli add calendarThen import the component:
import { Calendar } from '@/components/ui/calendar';Examples
Default Calendar
November 2025
Su
Mo
Tu
We
Th
Fr
Sa
Week Configuration
November 2025
Mo
Tu
We
Th
Fr
Sa
Su
Week Numbers
November 2025
Wk
Su
Mo
Tu
We
Th
Fr
Sa
43
44
45
46
47
48
Disabled Dates
November 2025
Su
Mo
Tu
We
Th
Fr
Sa
Date Range Restrictions
November 2025
Su
Mo
Tu
We
Th
Fr
Sa
Custom Formatting
November 2025
SU
MO
TU
WE
TH
FR
SA
Disabled State
November 2025
Su
Mo
Tu
We
Th
Fr
Sa
Event Handling
November 2025
Su
Mo
Tu
We
Th
Fr
Sa
API Reference
Prop
Type