Shadcn.io is not affiliated with official shadcn/ui
Calendar with Date and Time
A calendar with a footer containing action buttons for quick date selection and confirmation
Date pickers feel incomplete without action buttons. This React calendar adds a footer with Today and Clear buttons using shadcn/ui's Calendar and Button components. Built with react-day-picker's custom footer prop, it provides quick actions for common date operations—perfect for forms, scheduling apps, or any interface where users need convenient date shortcuts alongside calendar navigation.
Calendar with Date and Time preview
Installation
Related Components
Single Date Calendar
Basic calendar without footer actions
Calendar with Presets
Date range shortcuts and presets
Date Picker Input
Calendar in popover with input field
Calendar in Dialog
Calendar with dialog action buttons
Month/Year Dropdown
Calendar with dropdown navigation
Button Group
Grouped action buttons
FAQ
Was this page helpful?
Sign in to leave feedback.