shadcn.io is not affiliated with official shadcn/ui
Calendar examples · Standard
Calendar with Natural Language for React
A calendar with quick-select shortcuts such as Tomorrow, In a week and In a month.
A Calendar with a column of shortcuts beside it: Today, Tomorrow, In 3 days, In a week, In 2 weeks and In a month. A shortcut selects its date as if you had clicked it. Use it for due dates and follow-ups, where most picks are a few days or weeks out.
Preview
Installation
FAQ
Which shortcuts are in the list?
Today, Tomorrow, In 3 days, In a week, In 2 weeks and In a month.
fromToday adds the days or months onto today's year, month and date.
What happens when a shortcut is chosen?
Each shortcut is a Button whose value is its label. The click finds that shortcut, then sets selected and month so the grid shows the date.
How do I read the selected date?
mode="single" makes selected one date and onSelect the setter. This demo stores that date in state, starting from new Date().
How does the shortcut list scroll?
The list column is w-62, filled by an absolute inset-0 wrapper. ScrollArea has min-h-0 flex-1 under the heading Quick Select.
Related
- Calendar with RangeA two-month calendar for selecting a
- Date Picker as Appointment PickerA date picker that opens a calendar
- Calendar with Date and TimeA calendar with a time input under it for
- Basic Button GroupThree rows of outline buttons joined into
- Calendar with Range in DialogA button that opens a dialog with a
- Basic TabsFour horizontal tabs that switch between