Calendar

Radix UI

Loading component...

Installation

Usage

The Calendar component is built on react-day-picker and supports various modes and configurations for different date selection needs:

import { Calendar } from "@/components/redpanda-ui/calendar"
import { useState } from "react"

// Single date selection
const [date, setDate] = useState<Date | undefined>(new Date())

return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    className="rounded-md border"
  />
)

// Date range selection
const [dateRange, setDateRange] = useState<DateRange | undefined>()

return (
  <Calendar
    mode="range"
    selected={dateRange}
    onSelect={setDateRange}
    numberOfMonths={2}
    className="rounded-md border"
  />
)

// Multiple date selection
const [dates, setDates] = useState<Date[]>([])

return (
  <Calendar
    mode="multiple"
    selected={dates}
    onSelect={setDates}
    className="rounded-md border"
  />
)

// With disabled dates
const isDateDisabled = (date: Date) => {
  return date < new Date() || date.getDay() === 0 || date.getDay() === 6
}

return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    disabled={isDateDisabled}
    className="rounded-md border"
  />
)

When to use

Use this decision tree to determine when to use the Calendar component and which configuration is most appropriate:

Mode Guidelines

Single mode: Birthdate selection, appointment dates, event dates
Range mode: Hotel bookings, vacation planning, reporting periods
Multiple mode: Available dates, blackout dates, recurring events

Calendar vs DatePicker

Use Calendar when: You have space for inline display, users need to see surrounding dates context, visual date exploration is important
Use DatePicker when: Space is limited, part of a form, simple date input without exploration needs

Anatomy

The Calendar component is built on react-day-picker with custom styling and components:

Calendar Component Structure:
┌─────────────────────────────────────────┐
│ Calendar Root Container                 │
│ ┌─────────────────────────────────────┐ │
│ │ Navigation Bar                      │ │
│ │ [◀ Prev] [Month Year] [Next ▶]      │ │
│ │                                     │ │
│ │ - Dropdown: month/year selection    │ │
│ │ - Buttons: navigation controls      │ │
│ └─────────────────────────────────────┘ │
│ ┌─────────────────────────────────────┐ │
│ │ Weekday Headers                     │ │
│ │ [Mon] [Tue] [Wed] [Thu] [Fri] [Sat] │ │
│ └─────────────────────────────────────┘ │
│ ┌─────────────────────────────────────┐ │
│ │ Date Grid                           │ │
│ │ [30] [31] [ 1] [ 2] [ 3] [ 4] [ 5]  │ │
│ │ [ 6] [ 7] [ 8] [ 9] [10] [11] [12]  │ │
│ │ [13] [14] [15] [16] [17] [18] [19]  │ │
│ │ [20] [21] [22] [23] [24] [25] [26]  │ │
│ │ [27] [28] [29] [30] [31] [ 1] [ 2]  │ │
│ │                                     │ │
│ │ - Day buttons: individual dates     │ │
│ │ - States: selected, today, disabled │ │
│ │ - Range: start, middle, end         │ │
│ └─────────────────────────────────────┘ │
│                                         │
│ Multi-month layout (when enabled):     │
│ [Month 1] [Month 2] [Month 3]           │
└─────────────────────────────────────────┘