Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Calendar with Natural Language for React

A calendar beside shortcut buttons: Today, Tomorrow, In 3 days, In a week, In 2 weeks, and In a month.

A month grid sits beside Quick Select. The buttons are Today, Tomorrow, In 3 days, In a week, In 2 weeks, and In a month. Choosing one selects that day and shows its month. Nothing here parses a typed sentence.

Use it when common offsets should be one click. A free-text date belongs in a field, not in this list. Hide the grid in a Date Picker if the page is crowded. In React, Base UI does not read a phrase like next Tuesday.

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

Anatomy

Calendar anatomy: prev trigger, month select, year select, next trigger, table, table cell

Usage

<div className="flex divide-x overflow-hidden rounded-md border bg-background">
  <Calendar
    mode="single"
    month={month}
    onMonthChange={setMonth}
    onSelect={setDate}
    selected={date}
  />
  <div className="relative w-62 overflow-hidden">
    <div className="absolute inset-0 flex flex-col gap-4">
      <p className="px-4 pt-4 text-center font-medium text-sm">
        Quick Select
      </p>
      <ScrollArea className="min-h-0 flex-1">
        <div className="flex flex-col gap-2 px-4 pb-4">
          {shortcuts.map((shortcut) => (
            <Button
              key={shortcut.label}
              onClick={handleShortcutClick}
              size="sm"
              value={shortcut.label}
              variant="outline"
            >
              {shortcut.label}
            </Button>
          ))}
        </div>
      </ScrollArea>
    </div>
  </div>
</div>

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 are the shortcut buttons styled?

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

How does the list sit beside the month?

A flex row with divide-x, overflow-hidden, rounded-md and border holds the calendar and the list.

API Reference

Calendar

Sets mode="single", month={month}, onMonthChange={setMonth}, onSelect={setDate} and selected={date}. The rest is on the Calendar page.

Scroll Area

No extra props in this demo. The rest is on the Scroll Area page.

Button

Sets onClick={handleShortcutClick}, size="sm", value={shortcut.label} and variant="outline". The rest is on the Button page.

All 16 calendar examples