Back to elements
ElementData DisplayFree

Calendar React component

An inline month calendar for picking one day, a range or several days, with event dots under their days, an agenda for the selected day, months that slide in from the side they come from, a month picker, week numbers and full keyboard control.

When to use the Calendar component

Use Calendar when the calendar itself belongs on the page: booking and availability screens, a schedule next to a list of events, picking several days at once, or a dashboard widget. It shows where things are in the month at a glance.

If the date only needs to go into a form field, use Date Picker instead; it keeps the calendar in a popover until it's needed.

Installation

Add the Calendar component to your project with the shadcn CLI. It lands in components/calendar.tsx as plain React + Tailwind CSS source you own and can edit.

Install
Copied!
npx shadcn@latest add https://reactframe.com/r/calendar.json

Or copy the source by hand and install its dependencies:

Install
Copied!
npm install motion clsx tailwind-merge

Props

<Calendar /> accepts 26 props, all optional.

  • mode

    single: one day. range: a start and end day. multiple: any set of days.

    "single" | "range" | "multiple"
    Default: "single"
  • value
    Date | null
  • defaultValue
    Date | null
    Default: null
  • onValueChange
    (value: Date | null) => void
  • range
    object
  • range.from
    Date
  • range.to
    Date
  • defaultRange
    object
    Default: {}
  • defaultRange.from
    Date
  • defaultRange.to
    Date
  • onRangeChange
    (range: CalendarRange) => void
  • dates
    Date[]
Show all 30 props
  • defaultDates
    Date[]
    Default: []
  • onDatesChange
    (dates: Date[]) => void
  • month

    The month on show (any day in it).

    Date
  • defaultMonth
    Date
  • onMonthChange
    (month: Date) => void
  • events

    Dots under their days, and a list of the selected day's events when showAgenda is on.

    { date: Date; title: string; time?: string; color?: string }[]
    Default: []
  • showAgenda
    boolean
    Default: false
  • minDate
    Date
  • maxDate
    Date
  • isDateDisabled
    (date: Date) => boolean
  • weekStartsOn
    0 | 1
    Default: 1
  • locale
    string
    Default: "en-US"
  • showWeekNumbers
    boolean
    Default: false
  • showOutsideDays
    boolean
    Default: true
  • showTodayButton

    A "Today" button in the header that jumps back to the current month.

    boolean
    Default: true
  • size
    "sm" | "md" | "lg"
    Default: "md"
  • theme
    "dark" | "light"
    Default: "dark"
  • className
    string

FAQ

Can people pick a range or several days?
Yes. mode="range" picks a start and end day (the band follows the pointer while you choose the end); mode="multiple" toggles any number of days.
How do events show up?
Pass events with a date, title and optional time and colour. Each day shows up to three dots, and with showAgenda the selected day's events are listed under the grid.
Is it keyboard accessible?
It's a grid with one tab stop: arrows move by day and week, Home and End jump to the week's edges, Page Up and Page Down change month, and Enter or Space selects.

Related components

Basic Carousel
Free
Sparkline Stat
Free
Checklist
Free
Tag Input
Free
Empty State
Free
Kbd
Free