Calendar
A date field component that lets users enter and edit dates via a visual calendar grid.
bunx shadcn@latest add @nx-ui/calendarSingle date
Bind one Date through mode="single". Here a fieldworker books the day their soil samples are collected.
Collection booked for Thursday, 9 July 2026.
Date range
Set mode="range" and render two months to frame a sampling window — from the first drop-off to the final lab return.
Monitoring window: 06/07/2026 – 19/07/2026.
Disabled dates
Pass a matcher to `disabled` to grey out days that cannot be booked — here weekends and anything before the depot reopens are off-limits.
Kerbside pick-up confirmed for Wednesday, 8 July 2026.
Collection scheduler
Embed the calendar inside a Card to build a self-contained booking flow, with the confirmed date surfaced in the footer.
Collecting on Tuesday, 14 July 2026.
API reference
Exported parts and their props, extracted from the component source.