Calendar

"use client"

import * as React from "react"

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

// A fixed "today" keeps statically rendered docs deterministic.
const today = new Date(2026, 8, 23)

export default function CalendarDemo() {
  const [date, setDate] = React.useState<Date | undefined>(
    new Date(2026, 8, 26)
  )

  return (
    <Calendar
      mode="single"
      today={today}
      defaultMonth={today}
      selected={date}
      onSelect={setDate}
      className="rounded-xl border shadow-raised"
    />
  )
}

"use client"

import * as React from "react"
import type { DateRange } from "react-day-picker"

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

const today = new Date(2026, 8, 23)

export default function CalendarRange() {
  const [range, setRange] = React.useState<DateRange | undefined>({
    from: new Date(2026, 8, 28),
    to: new Date(2026, 9, 9),
  })

  return (
    <Calendar
      mode="range"
      today={today}
      defaultMonth={today}
      numberOfMonths={2}
      selected={range}
      onSelect={setRange}
      disabled={{ before: today }}
      className="rounded-xl border shadow-raised"
    />
  )
}

"use client"

import * as React from "react"

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

const today = new Date(2026, 8, 23)

export default function CalendarMultiple() {
  const [days, setDays] = React.useState<Date[] | undefined>([
    new Date(2026, 8, 24),
    new Date(2026, 8, 29),
    new Date(2026, 9, 1),
  ])

  return (
    <div className="flex flex-col items-center gap-3">
      <Calendar
        mode="multiple"
        max={5}
        today={today}
        defaultMonth={today}
        selected={days}
        onSelect={setDays}
        className="rounded-xl border shadow-raised"
      />
      <p className="text-sm text-muted-foreground" aria-live="polite">
        {`Wybrano: ${days?.length ?? 0} z 5 dni w biurze`}
      </p>
    </div>
  )
}

"use client"

import * as React from "react"

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

export default function CalendarDropdown() {
  const [date, setDate] = React.useState<Date | undefined>(
    new Date(1990, 4, 12)
  )

  return (
    <Calendar
      mode="single"
      captionLayout="dropdown"
      startMonth={new Date(1920, 0)}
      endMonth={new Date(2026, 11)}
      defaultMonth={date}
      selected={date}
      onSelect={setDate}
      className="rounded-xl border shadow-raised"
    />
  )
}

"use client"

import * as React from "react"

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

const today = new Date(2026, 8, 23)
const booked = [
  new Date(2026, 8, 24),
  new Date(2026, 8, 25),
  new Date(2026, 9, 2),
]

export default function CalendarDisabledDates() {
  const [date, setDate] = React.useState<Date | undefined>()

  return (
    <Calendar
      mode="single"
      today={today}
      defaultMonth={today}
      selected={date}
      onSelect={setDate}
      // Past days, weekends and fully booked days can't be chosen.
      disabled={[{ before: today }, { dayOfWeek: [0, 6] }, ...booked]}
      modifiers={{ booked }}
      modifiersClassNames={{ booked: "[&>button]:line-through" }}
      className="rounded-xl border shadow-raised"
    />
  )
}

"use client"

import * as React from "react"
import { CalendarIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

const today = new Date(2026, 8, 23)
const formatter = new Intl.DateTimeFormat("pl-PL", { dateStyle: "long" })

export default function CalendarDatePicker() {
  const [open, setOpen] = React.useState(false)
  const [date, setDate] = React.useState<Date | undefined>()

  return (
    <Field className="w-64">
      <FieldLabel htmlFor="due-date">Termin</FieldLabel>
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger
          render={
            <Button
              id="due-date"
              variant="outline"
              className="w-full justify-start font-normal data-[empty=true]:text-muted-foreground"
              data-empty={!date}
            />
          }
        >
          <CalendarIcon data-icon="inline-start" />
          {date ? formatter.format(date) : "Wybierz datę"}
        </PopoverTrigger>
        <PopoverContent align="start" className="w-auto p-0">
          <Calendar
            mode="single"
            today={today}
            defaultMonth={date ?? today}
            selected={date}
            onSelect={(next) => {
              setDate(next)
              setOpen(false)
            }}
            disabled={{ before: today }}
          />
        </PopoverContent>
      </Popover>
      <FieldDescription>
        Po tym dniu zadanie stanie się zaległe.
      </FieldDescription>
    </Field>
  )
}

"use client"

import * as React from "react"
import { pl } from "react-day-picker/locale"

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

const today = new Date(2026, 8, 23)

export default function CalendarLocalized() {
  const [date, setDate] = React.useState<Date | undefined>(
    new Date(2026, 8, 30)
  )

  return (
    <Calendar
      mode="single"
      locale={pl}
      showWeekNumber
      today={today}
      defaultMonth={today}
      selected={date}
      onSelect={setDate}
      className="rounded-xl border shadow-raised"
    />
  )
}