Calendar

A calendar component that allows users to select a date or a range of dates.

September 2026

const [date, setDate] = React.useState<Date | undefined>(new Date())

return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    className="rounded-lg border"
  />
)

Installation

pnpm dlx cubix@latest add calendar

Usage

Import

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

Example

const [date, setDate] = React.useState<Date | undefined>(new Date())

return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    className="rounded-lg border"
  />
)

About

The Calendar is built on React DayPicker. See the DayPicker docs for the full prop surface.

Examples

Basic

A single-date calendar. rounded-lg border gives it a panel look.

September 2026

const [date, setDate] = React.useState<Date | undefined>(new Date())

return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    className="rounded-lg border"
  />
)

Range Calendar

Use mode="range" to select a start and end date.

September 2026

October 2026

<Calendar
  mode="range"
  selected={dateRange}
  onSelect={setDateRange}
  numberOfMonths={2}
  className="rounded-lg border"
/>

Month and Year Selector

Set captionLayout="dropdown" to jump months and years.

September 2026

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

Booked dates

Disable dates and mark them with modifiers for a booked look.

February 2026

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  disabled={bookedDates}
  modifiers={{ booked: bookedDates }}
  modifiersClassNames={{
    booked: "[&>button]:line-through opacity-100",
  }}
  className="rounded-lg border"
/>

Week Numbers

Use showWeekNumber to show week numbers.

September 2026

	Su	Mo	Tu	We	Th	Fr	Sa
36
37
38
39
40

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

Date picker

Compose Calendar with Popover to build a date picker field.

Pick a date

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>
    <CalendarIcon data-icon="inline-start" />
    {date ? date.toLocaleDateString() : "Pick a date"}
  </PopoverTrigger>
  <PopoverContent className="w-auto p-0" align="start">
    <Calendar mode="single" selected={date} onSelect={setDate} />
  </PopoverContent>
</Popover>

Persian / Jalali

To use the Persian calendar, import DayPicker from react-day-picker/persian instead of react-day-picker in calendar.tsx.

import { DayPicker } from "react-day-picker/persian"

Selected Date (With TimeZone)

Pass timeZone from the client so the selected day matches the user's local timezone.

const [date, setDate] = React.useState<Date | undefined>(undefined)
const [timeZone, setTimeZone] = React.useState<string | undefined>(undefined)

React.useEffect(() => {
  setTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone)
}, [])

return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    timeZone={timeZone}
  />
)

API Reference

Note: Calendar forwards React DayPicker props. Set timeZone on the client if the highlighted day looks one day off.

Calendar

The calendar that lets users pick a date or a range of dates.

Prop	Type	Default	Description
mode	"single" \| "multiple" \| "range"	"single"	Selection mode for one date, several dates, or a range.
selected	Date \| Date[] \| DateRange	-	The selected date, dates, or range.
onSelect	(date) => void	-	Called when the selection changes.
captionLayout	"label" \| "dropdown" \| "dropdown-months" \| "dropdown-years"	"label"	Month caption as text or month/year dropdowns.
numberOfMonths	number	1	How many months to show side by side.
showWeekNumber	boolean	false	Show ISO week numbers in a leading column.
showOutsideDays	boolean	true	Show days from the previous and next months.
buttonVariant	"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link"	"ghost"	Visual style of the previous and next month buttons.
locale	Locale	-	Locale from react-day-picker/locale for labels and RTL.
timeZone	string	-	IANA timezone used to display and select dates. Set this on the client to avoid hydration mismatches.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).