Calendar

A date picker calendar panel built on Radix UI and date-fns. Renders a monthly grid for date selection. For a form-integrated date input, see CalendarInput.

Import


import { Calendar } from "@phpcreation/frontend-components-react-nextjs-bundle/components/Calendar";

Props

Prop	Type	Default	Description
`selected`	`Date \| undefined`	—	Selected date
`onSelect`	`(date: Date \| undefined) => void`	—	Selection handler
`mode`	`"single" \| "range" \| "multiple"`	`"single"`	Selection mode
`disabled`	`Matcher \| Matcher[]`	—	Disable specific dates
`initialFocus`	`boolean`	`false`	Focus on mount
`className`	`string`	—	Additional CSS classes

Usage


import { useState } from "react";
import { Calendar } from "...";
 
const [date, setDate] = useState<Date | undefined>();
 
<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  initialFocus
/>

For form fields with a text input + calendar popover, use CalendarInput instead. The raw Calendar is useful for embedding a date picker inline on a page.

Calendar Input — text input with calendar popover
Popover — used to wrap Calendar in a popover
Render Form Fields

Calendar

Import

Props

Usage

Related