Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar examples · Dialog

Calendar with Natural Language in Dialog for React

A button that opens a dialog with a calendar and quick-select shortcuts such as Tomorrow and In a week.

Framework
UI library

The shortcut calendar inside a Dialog: a Select Date button opens it, with the month on one side and six relative shortcuts on the other. Use it to set a due date or a reminder without leaving the page.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

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.

How is the dialog opened?

DialogTrigger is a button reading Select Date. It opens DialogContent with sm:max-w-fit, and DialogTitle reads Select Date.

How are the shortcut buttons styled?

Every shortcut Button uses size="sm" and variant="outline". The heading above them is the text Quick Select.

All 16 calendar examples