Command Palette

Search for a command to run...

Calendar

Usage

April 2026
'use client'
 
import { Calendar } from '@jamie/ui/calendar'
import { useState } from 'react'
 
export function CalendarDemo() {
  const [date, setDate] = useState<Date | undefined>(new Date())
 
  return <Calendar mode="single" selected={date} onSelect={setDate} />
}

Range

Use mode="range" to enable date range selection. Combine with numberOfMonths={2} to show two months side by side.

April 2026
May 2026
'use client'
 
import { Calendar, type DateRange } from '@jamie/ui/calendar'
import { addDays } from 'date-fns'
import { useState } from 'react'
 
export function CalendarRangeDemo() {
  const [range, setRange] = useState<DateRange | undefined>({
    from: new Date(),
    to: addDays(new Date(), 7)
  })
 
  return <Calendar mode="range" selected={range} onSelect={setRange} numberOfMonths={2} />
}

Month and Year Selector

Use captionLayout="dropdown" to show month and year dropdowns. Set startMonth and endMonth to constrain the selectable range.

April 2026
'use client'
 
import { Calendar } from '@jamie/ui/calendar'
import { useState } from 'react'
 
export function CalendarCaptionDemo() {
  const [date, setDate] = useState<Date | undefined>(new Date())
 
  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      captionLayout="dropdown"
      startMonth={new Date(2020, 0)}
      endMonth={new Date(2030, 11)}
    />
  )
}

Booked Dates

Pass an array of dates to the disabled prop to prevent selection of specific days.

April 2026
'use client'
 
import { Calendar } from '@jamie/ui/calendar'
import { addDays } from 'date-fns'
import { useState } from 'react'
 
const bookedDates = [
  addDays(new Date(), 1),
  addDays(new Date(), 3),
  addDays(new Date(), 5),
  addDays(new Date(), 8),
  addDays(new Date(), 12)
]
 
export function CalendarBookedDatesDemo() {
  const [date, setDate] = useState<Date | undefined>(new Date())
 
  return <Calendar mode="single" selected={date} onSelect={setDate} disabled={bookedDates} />
}

Week Numbers

Use showWeekNumber to display ISO week numbers alongside each row.

April 2026
14
15
16
17
18
'use client'
 
import { Calendar } from '@jamie/ui/calendar'
import { useState } from 'react'
 
export function CalendarWeekNumbersDemo() {
  const [date, setDate] = useState<Date | undefined>(new Date())
 
  return <Calendar mode="single" selected={date} onSelect={setDate} showWeekNumber />
}