Calendar

An interactive date picker calendar with month navigation and date selection support.

Preview

Check-in Date

August 2026

Selected: Saturday, 15 August 2026

Usage

tsx
import { Calendar } from "zostel-ui";
import { useState } from "react";

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

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
/>

{/* Range selection */}
<Calendar
  mode="range"
  selected={{ from: checkIn, to: checkOut }}
  onSelect={setRange}
  numberOfMonths={2}
/>

Props

mode
Type: "single" | "range" | "multiple"
Default: "single"

Date selection mode

selected
Type: Date | DateRange | Date[]
Default: —

Currently selected date(s)

onSelect
Type: (date: Date | undefined) => void
Default: —

Callback when a date is selected

disabled
Type: Matcher | Matcher[]
Default: —

Dates or date ranges to disable

numberOfMonths
Type: number
Default: 1

Number of months to display

className
Type: string
Default: —

Additional CSS classes
Previous Carousel Next Dialog