Calendar

A date picker component that allows users to select dates or date ranges.

Usage

import { Calendar } from "@rhinolabs/ui"

export default function CalendarDemo() {
  return (
    <Calendar
      mode="single"
      selected={new Date()}
      onSelect={(date) => console.log(date)}
      className="rounded-md border"
    />
  )
}

Examples

Single Date Selection

Basic calendar for selecting a single date.

<Calendar
  mode="single"
  selected={new Date()}
  onSelect={(date) => console.log(date)}
  className="rounded-md border"
/>

Date Range Selection

Calendar configured for selecting a date range.

<Calendar
  mode="range"
  selected={{
    from: new Date(2024, 0, 1),
    to: new Date(2024, 0, 5)
  }}
  onSelect={(range) => console.log(range)}
  className="rounded-md border"
/>

With Outside Days

Calendar showing days from previous/next months.

<Calendar
  mode="single"
  selected={new Date()}
  showOutsideDays
  className="rounded-md border"
/>

Props

Prop	Type	Default	Description
mode	"single" | "range" | "multiple"	"single"	Selection mode
selected	Date | { from: Date, to: Date }	-	Selected date(s)
showOutsideDays	boolean	true	Show days from previous/next months
onSelect	(date: Date | { from: Date, to: Date }) => void	-	Selection callback

The Calendar component extends all props from react-day-picker’s DayPicker component.

Design Considerations

• Use appropriate date formatting for your locale
• Provide clear visual feedback for selected dates
• Consider mobile-friendly touch targets
• Maintain consistent styling with your theme
• Handle disabled dates appropriately

Accessibility

• Supports keyboard navigation
• Provides ARIA labels for dates
• Maintains focus management
• Announces date changes
• Handles screen reader announcements