Calendar

pnpm
npm
yarn
bun
pnpm dlx @preskok-org/ui@latest add calendar
Copy

Copyimport { getLocalTimeZone, today } from "@internationalized/date"
 
import { Calendar } from "@/registry/preskok/ui/preskok-ui/calendar"
 
export function CalendarDemo() {
  const [date, setDate] = useState(today(getLocalTimeZone()))
 
  return <Calendar value={date} onChange={setDate} aria-label="Select a date" />
}

Copyimport { useState } from "react"
import { getLocalTimeZone, today } from "@internationalized/date"
 
function BasicCalendar() {
  const [date, setDate] = useState(today(getLocalTimeZone()))
 
  return <Calendar value={date} onChange={setDate} aria-label="Select a date" />
}

Copyimport { useState } from "react"
import { getLocalTimeZone, today } from "@internationalized/date"
 
function CalendarWithRange() {
  const [range, setRange] = useState({
    start: today(getLocalTimeZone()),
    end: today(getLocalTimeZone()).add({ days: 7 }),
  })
 
  return (
    <Calendar
      selectionMode="range"
      value={range}
      onChange={setRange}
      aria-label="Select date range"
    />
  )
}

Copyfunction CalendarWithDisabledDates() {
  const [date, setDate] = useState(null)
 
  const isDateUnavailable = (date) => {
    // Disable weekends
    const dayOfWeek = date.toDate(getLocalTimeZone()).getDay()
    return dayOfWeek === 0 || dayOfWeek === 6
  }
 
  return (
    <Calendar
      value={date}
      onChange={setDate}
      isDateUnavailable={isDateUnavailable}
      aria-label="Select a weekday"
    />
  )
}

Copyfunction CalendarWithLimits() {
  const [date, setDate] = useState(null)
  const today = today(getLocalTimeZone())
 
  return (
    <Calendar
      value={date}
      onChange={setDate}
      minValue={today}
      maxValue={today.add({ months: 3 })}
      aria-label="Select future date"
    />
  )
}

Copyfunction MultiMonthCalendar() {
  const [date, setDate] = useState(null)
 
  return (
    <Calendar
      value={date}
      onChange={setDate}
      visibleDuration={{ months: 2 }}
      aria-label="Select a date"
    />
  )
}

Copyfunction CalendarWithControls() {
  const [date, setDate] = useState(null)
  const [focusedDate, setFocusedDate] = useState(today(getLocalTimeZone()))
 
  return (
    <Calendar
      value={date}
      onChange={setDate}
      focusedValue={focusedDate}
      onFocusChange={setFocusedDate}
      aria-label="Select a date"
    />
  )
}