Calendar

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

export default function Basic() {
  return <Calendar mode="single" className="rounded-md border" />;
}

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

export default function Multiple() {
  return (
    <Calendar
      mode="multiple"
      numberOfMonths={2}
      className="rounded-md border"
    />
  );
}

"use client";

import * as React from "react";
import { Calendar } from "@/components/ui/calendar";

type DateRange = {
  from: Date | undefined;
  to?: Date | undefined;
};

export default function Calendar3() {
  const [date, setDate] = React.useState<DateRange | undefined>({
    from: new Date(),
    to: new Date(new Date().setDate(new Date().getDate() + 10)),
  });

  return (
    <Calendar
      mode="range"
      selected={date}
      onSelect={setDate}
      className="rounded-md border"
    />
  );
}

"use client";

import * as React from "react";
import { Calendar } from "@/components/ui/calendar";

export default function Calendar4() {
  const [selectedDays, setSelectedDays] = React.useState<Date[]>([
    new Date(),
    new Date(new Date().setDate(new Date().getDate() + 5)),
    new Date(new Date().setDate(new Date().getDate() + 10)),
    new Date(new Date().setDate(new Date().getDate() + 15)),
    new Date(new Date().setDate(new Date().getDate() + 20)),
  ]);

  return (
    <Calendar
      mode="multiple"
      selected={selectedDays}
      onSelect={(days) => setSelectedDays(days || [])}
      className="rounded-md border"
    />
  );
}

"use client";

import * as React from "react";
import { Calendar } from "@/components/ui/calendar";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

export default function Calendar5() {
  const [date, setDate] = React.useState<Date | undefined>(new Date());
  const [month, setMonth] = React.useState<number>(date?.getMonth() || 0);
  const [year, setYear] = React.useState<number>(date?.getFullYear() || 2026);

  const months = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
  ];

  const years = Array.from({ length: 10 }, (_, i) => 2020 + i);

  const handleMonthChange = (value: string) => {
    const newMonth = months.indexOf(value);
    setMonth(newMonth);
    setDate(new Date(year, newMonth, 1));
  };

  const handleYearChange = (value: string) => {
    const newYear = Number.parseInt(value);
    setYear(newYear);
    setDate(new Date(newYear, month, 1));
  };

  return (
    <div className="space-y-2">
      <Calendar
        mode="single"
        selected={date}
        onSelect={setDate}
        month={new Date(year, month)}
        onMonthChange={(date) => {
          setMonth(date.getMonth());
          setYear(date.getFullYear());
        }}
        className="rounded-md border"
        captionLayout="label"
        startMonth={new Date(2020, 0)}
        endMonth={new Date(2029, 11)}
      />
      <div className="flex space-x-2">
        <Select value={months[month]} onValueChange={handleMonthChange}>
          <SelectTrigger className="w-full">
            <SelectValue placeholder="Month" />
          </SelectTrigger>
          <SelectContent>
            {months.map((month) => (
              <SelectItem key={month} value={month}>
                {month}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <Select value={year.toString()} onValueChange={handleYearChange}>
          <SelectTrigger className="w-full">
            <SelectValue placeholder="Year" />
          </SelectTrigger>
          <SelectContent>
            {years.map((year) => (
              <SelectItem key={year} value={year.toString()}>
                {year}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}