Calendar
Date selection for single dates, ranges, bookings and localized calendars.
Installation
Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.
Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/calendar-appointment-booking.json.
Usage
Examples
Appointment booking
Caption and navigation
Daily pricing
Event list
Date pickers in popovers
Presets
Selection and display options
Year and month grid
Date selector: Opened from a field
Date selector: Options
Date selector: Translated, in a dialog
API
13 props
Accessibility
DayPicker supplies grid navigation and selected-date announcements. Label the calendar and explain disabled dates.
Notes
- Calendar forwards DayPicker props. Range selection uses
{ from, to }; an incomplete range may have no end date. - DateSelector is a separate compound export for period selection. Its examples include the complete value and localization shape.
Related
CardCard frames reusable content with title, subtitle, and optional children.8 examplesToggleGroupSingle or multiple pressed choices for view modes and compact formatting controls.6 examplesDialogModal, confirmation and bare full-screen dialogs for editing, detail inspection, explicit decisions, lightboxes and launchers.12 examplesPopoverPopover renders compact positioned supporting content next to its trigger.8 examplesSelectSelect renders a styled option picker with searchable combobox behavior and multi-select support.20 examplesFieldField composes form label, description, error, and input building blocks.7 examples