Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Calendar with Date and Time
A calendar with a footer containing action buttons for quick date selection and confirmation
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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