For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
43
Sponsor

Calendar

PreviousNext

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

August 2026
"use client";

import { useState } from "react";

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

Installation

$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.com/r/calendar.json

Usage

import { Calendar } from "@/components/ui/calendar/calendar";
<Calendar mode="single" selected={date} onSelect={setDate} />

Examples

Basic

August 2026
"use client";

import { useState } from "react";

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

Range Calendar

Use mode="range" to select a range of dates.

January 2026
February 2026
"use client";

import { addDays } from "date-fns";
import { useState } from "react";
import type { DateRange } from "react-day-picker";

Month and Year Selector

Use captionLayout="dropdown" to show month and year dropdowns.

August 2026
"use client";

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

export function CalendarCaption() {
  return (

Presets

August 2026
"use client";

import { addDays } from "date-fns";
import { useState } from "react";

import { Button } from "@/components/ui/button";

Booked dates

Use disabled and modifiers to mark booked dates.

January 2026
"use client";

import { useState } from "react";

import { Calendar } from "@/components/ui/calendar";
import { Card, CardContent } from "@/components/ui/card";

Week Numbers

Use showWeekNumber to display week numbers.

January 2026
01
02
03
04
05
"use client";

import { useState } from "react";

import { Calendar } from "@/components/ui/calendar";
import { Card, CardContent } from "@/components/ui/card";

RTL

To enable right-to-left support, see the RTL guide.

أغسطس 2026
"use client";

import * as React from "react";
import { arSA, he } from "react-day-picker/locale";

import { useTranslation } from "@/components/language-selector";

API Reference

The Calendar component is built on top of React DayPicker. See the React DayPicker documentation for the full list of props.