Calendar Picker - Saturation UI

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/calendar-picker.json

Tailwind v4 — Source Scanning

Saturation UI copies component source into your project via the shadcn registry (no npm package). If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { CalendarPicker } from "@/components/ui/calendar-picker"

<CalendarPicker selected={date} onSelect={setDate} />

Examples

Date Range

Range mode selection.

Multi Month

Multiple months displayed.

Multi Month Range

Multi month with range.

Disabled Dates

Disabled specific dates.

Disabled Weekends

Disabled weekends.

Month & Year

Month/year dropdown.

With Events

Calendar with event list.

With Time

Calendar with time input.

API Reference

Prop	Type	Default	Description
`selected`	`Date \| Date[]`	—	Selected date(s).
`onSelect`	`(date: Date) => void`	—	Selection handler.
`mode`	`"single" \| "range" \| "multiple"`	`"single"`	Selection mode.

April 2026

Installation

pnpm dlx shadcn@latest add https://ui.saturation.io/r/calendar-picker.json

Tailwind v4 — Source Scanning

Saturation UI copies component source into your project via the shadcn registry (no npm package). If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { CalendarPicker } from "@/components/ui/calendar-picker"

<CalendarPicker selected={date} onSelect={setDate} />

Examples

Date Range

April 2026

Range mode selection.

Multi Month

April 2026

May 2026

Multiple months displayed.

Multi Month Range

April 2026

May 2026

Multi month with range.

Disabled Dates

April 2026

Dates on Feb 10-12, 20, and 25 are disabled.

Disabled specific dates.

Disabled Weekends

April 2026

Weekends (Saturday and Sunday) are disabled.

Disabled weekends.

Month & Year

April 2026

Month/year dropdown.

With Events

April 2026

Thursday, February 5

Script lock deadline

deadline

Calendar with event list.

With Time

April 2026

Time

Selected: February 5, 2026 at 10:00

Calendar with time input.

API Reference

Prop	Type	Default	Description
`selected`	`Date \| Date[]`	—	Selected date(s).
`onSelect`	`(date: Date) => void`	—	Selection handler.
`mode`	`"single" \| "range" \| "multiple"`	`"single"`	Selection mode.