Skip to content
aq-ui
Back to ComponentsComponent

Calendar

Open-code aq-ui accessible component family for Calendar.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

Installation

pnpm dlx aq-ui@alpha add calendar

API reference

Client module

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

"use client"

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

<Calendar />

Calendar

functionSource L20

Open-code aq-ui accessible component family for Calendar.

function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & { buttonVariant?: React.ComponentProps<typeof Button>["…)
Props type
React.ComponentProps<typeof DayPicker> & { buttonVariant?: React.ComponentProps<typeof Button>["variant"] }

Props

NameTypeDefault
buttonVariant?React.ComponentProps<typeof Button>["variant"]"ghost"
<Calendar />

CalendarDayButton

constSource L190

Public const export from Calendar.

const CalendarDayButton = React.forwardRef<React.ComponentRef<typeof Button>, React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }>(…)
Props type
React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }

Props

NameType
locale?Partial<Locale>
<CalendarDayButton />

Registry dependencies

button, use-merged-refs, utils

Package dependencies

lucide-react@^1.31.0, react-day-picker@^10.0.1

Files

  • components/ui/calendar.tsx

Source