Search

Search documentation

Calendar

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

Installation

pnpm dlx shadcn@latest add @evolphin/calendar

Usage

import { Calendar } from "@/components/ui/calendar";
const [date, setDate] = React.useState<Date | undefined>(new Date())

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  className="rounded-md border"
/>

Type Definitions

import {  } from "react-day-picker";

type  = .<typeof >;

Examples

Default

March 2026

API Reference

Calendar

This component is a wrapper around react-day-picker. See the react-day-picker documentation for all available props.

PropTypeDefaultDescription
showOutsideDaysbooleantrueShow days from the previous and next month in the current month's calendar.
classNamestring-Additional CSS classes

On this page