Calendar

A calendar component that allows users to select a date or a range of dates. Built on React DayPicker.

Default

Single date selection with captionLayout="dropdown".

Installation

CLI

npx @sonojs/ui@latest add calendar

Also needsnpx @sonojs/ui@latest add button popover && npm i date-fns lucide-react react-day-picker@^9.14.0

Usage

calendar.tsx

"use client"

import React from "react"

import { Calendar } from "@/components/ui/calendar"

export function Example() {
  const [date, setDate] = React.useState<Date | undefined>(new Date())

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

Props

Prop	Type	Default	Description
mode	"single" · "multiple" · "range"	-	Selection mode from React DayPicker.
captionLayout	"label" · "dropdown" · "dropdown-months" · "dropdown-years"	"label"	Month/year caption presentation.
buttonVariant	Button variant	"ghost"	Variant for previous/next nav buttons.
showOutsideDays	boolean	true	Show days from adjacent months.