Skip to content

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

Free

Calendar with Natural Language in Dialog for Ark UI

A Select Date button that opens a calendar beside Today, Tomorrow, In 3 days, In a week, In 2 weeks, and In a month.

Select Date opens a dialog with that title. A month grid sits beside Quick Select: Today, Tomorrow, In 3 days, In a week, In 2 weeks, and In a month. The buttons pick a day. They do not parse typed text.

Use it when a shortcut list should stay out of the page until needed. Show the list inline if people pick dates all day. A Date Picker is the field version. In React, Ark UI does not understand a written date.

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

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Select Date</Button>
  </DialogTrigger>
  <DialogContent className="sm:max-w-fit">
    <DialogHeader>
      <DialogTitle>Select Date</DialogTitle>
    </DialogHeader>
    <Calendar
      className="flex divide-x overflow-hidden rounded-md border p-0"
      onValueChange={handleValueChange}
      value={value}
    >
      <div className="p-3">
        <CalendarViewControl>
          <CalendarPrevTrigger />
          <CalendarViewDate />
          <CalendarNextTrigger />
        </CalendarViewControl>
        <CalendarTable>
          <CalendarWeekDays />
          <CalendarTableDays />
        </CalendarTable>
      </div>
      <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">
{/* The rest of the file is under Installation. */}

FAQ

Which shortcuts are in the list?

Today, Tomorrow, In 3 days, In a week, In 2 weeks and In a month. Each date is today.add with days, weeks or months. today is parseDate(new Date()).

What happens when a shortcut is chosen?

Each shortcut is a CalendarPresetTrigger with that date as value, on a Button through asChild. The trigger sits inside Calendar, so choosing it selects that date.

How do I read the selected date?

value is a list holding the selected date, and onValueChange receives { value }. This demo starts the list from parseDate(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.

API Reference

Dialog

Sets asChild. The rest is on the Dialog page.

Button

Sets variant="outline" and size="sm". The rest is on the Button page.

Calendar

Sets onValueChange={handleValueChange}, value={value}, asChild and value={[shortcut.date]}. The rest is on the Calendar page.

Scroll Area

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

All 16 calendar examples