Reddot UI Library

Docs
Calendar

Calendar

A date field component that allows users to enter and edit dates.

SourceApi

Installation

$npx shadcn@latest add https://reddot.dottools.xyz/r/calendar.json

Usage

import { Calendar } from "@/components/ui/calendar"
"use client"
 
import * as React from "react"
import { Calendar } from "@/components/ui/calendar"
 
export function CalendarDemo() {
  const [date, setDate] = React.useState<Date | undefined>(new Date())
 
  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-md border"
    />
  )
}

Examples

Date of Birth Picker

Range Calendar

Multiple Months

<Calendar
  numberOfMonths={2}
  mode="range"
  selected={dateRange}
  onSelect={setDateRange}
/>

Custom Caption Layout

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  captionLayout="dropdown"
/>

References