labsUI

Calendar

Month grid on the WAI-ARIA date-grid pattern: single date or range with a hover preview, min/max and custom disabled days, months that slide in from the direction of travel. Arrows, Home/End and PageUp/PageDown (+Shift for years). Hydration-safe: today is only marked in the browser.

npx @kznlabs/labsui add calendar

October 2026

MTWTFSS

October 2026

MTWTFSS
"use client";import { useState } from "react";import { Calendar, type DateRange } from "@/components/ui/calendar";const weekend = (d: Date) => d.getDay() === 0 || d.getDay() === 6;export function BookingCalendar() {  const [stay, setStay] = useState<DateRange>({});  return (    <Calendar      mode="range"      value={stay}      onValueChange={setStay}      isDisabled={weekend}    />  );}

<Calendar>

Month grid on the WAI-ARIA date-grid pattern. Single date or range (with a hover preview), min/max and custom disabled days, months slide in from the direction of travel. Keyboard: arrows by day and week, Home/End to the week's ends, PageUp/PageDown by month (+Shift: year).

  • autoFocus
    boolean

    Focus the current day on mount (DatePicker sets this).

  • defaultMonth
    Date

    Month shown at first render (uncontrolled).

  • defaultValue
    Date | DateRange | null

    Day or range picked at first render (uncontrolled).

  • isDisabled
    (date: Date) => boolean

    Extra rule, e.g. weekends off. Client-only (a function).

  • locale
    string

    BCP 47 locale for month and weekday names.

  • max
    Date

    Latest selectable day.

  • min
    Date

    Earliest selectable day.

  • mode
    "single" | "range"

    "single": pick one day. "range": pick a start, then an end.

  • month
    Date

    Displayed month (any day in it). Controlled with onMonthChange, or start at defaultMonth.

  • onMonthChange
    (month: Date) => void

    Called when the user pages or arrows into another month.

  • onValueChange
    ((date: Date) => void) | ((range: DateRange) => void)

    Called with the picked day, or with the range as it is picked.

  • value
    Date | DateRange | null

    Controlled day, or { from, to } in range mode; null = nothing picked.

  • weekStartsOn
    0 | 1 | 2 | 3 | 4 | 5 | 6

    0 is Sunday, 6 is Saturday. Default 1 (Monday, ISO).

PropTypeDefault
autoFocus

Focus the current day on mount (DatePicker sets this).

boolean—
defaultMonth

Month shown at first render (uncontrolled).

Date—
defaultValue

Day or range picked at first render (uncontrolled).

Date | DateRange | null—
isDisabled

Extra rule, e.g. weekends off. Client-only (a function).

(date: Date) => boolean—
locale

BCP 47 locale for month and weekday names.

string—
max

Latest selectable day.

Date—
min

Earliest selectable day.

Date—
mode

"single": pick one day. "range": pick a start, then an end.

"single" | "range"—
month

Displayed month (any day in it). Controlled with onMonthChange, or start at defaultMonth.

Date—
onMonthChange

Called when the user pages or arrows into another month.

(month: Date) => void—
onValueChange

Called with the picked day, or with the range as it is picked.

((date: Date) => void) | ((range: DateRange) => void)—
value

Controlled day, or { from, to } in range mode; null = nothing picked.

Date | DateRange | null—
weekStartsOn

0 is Sunday, 6 is Saturday. Default 1 (Monday, ISO).

0 | 1 | 2 | 3 | 4 | 5 | 6—

key()

Local YYYY-MM-DD; sorts like the dates it names.

key(date: Date) => string
type DateRange
{ from?: Date; to?: Date }

* required. Every component also takes className.