Calendar

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

import { Calendar } from "@/registry/optics/calendar";<Calendar	mode="single"	selected={date}	onSelect={setDate}	className="rounded-md border"/>

import { Calendar } from "@/registry/optics/calendar";<Calendar	mode="single"	selected={date}	onSelect={setDate}	className="rounded-md border"/>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/calendar.json

Name

Type

className

string

classNames

object

showOutsideDays

boolean (default: true)

captionLayout

"label" | "dropdown" | "dropdown-months" | "dropdown-years"

buttonVariant

formatters

object

components

object