Calendar

"use client";

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

export function CalendarBlock() {
  const [date, setDate] = useState<Date | undefined>(new Date(2025, 5, 12));

  return (
    <div className="flex items-center justify-center p-5 min-h-[500px]">
      <Calendar
        animate
        mode="single"
        defaultMonth={date}
        selected={date}
        onSelect={setDate}
        className="border shadow-sm"
      />
    </div>
  );
}

"use client";

import { useState } from "react";

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

export function Calendar2Block() {
  const [date, setDate] = useState<Date | undefined>(new Date(2025, 5, 12));

  return (
    <div className="flex items-center justify-center p-5 min-h-[500px]">
      <Calendar
        animate
        mode="single"
        defaultMonth={date}
        numberOfMonths={2}
        selected={date}
        onSelect={setDate}
      />
    </div>
  );
}

"use client";

import { useState } from "react";

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

export function Calendar3Block() {
  const [dates, setDates] = useState<Date[]>([
    new Date(2025, 5, 12),
    new Date(2025, 6, 24),
  ]);

  return (
    <div className="flex items-center justify-center p-5 min-h-[500px]">
      <Calendar
        animate
        mode="multiple"
        numberOfMonths={2}
        defaultMonth={dates[0]}
        required
        selected={dates}
        onSelect={setDates}
        max={5}
      />
    </div>
  );
}

"use client";

import { useState } from "react";
import { DateRange } from "react-day-picker";

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

export function Calendar4Block() {
  const [dateRange, setDateRange] = useState<DateRange | undefined>({
    from: new Date(2025, 5, 12),
    to: new Date(2025, 6, 15),
  });

  return (
    <div className="flex items-center justify-center p-5 min-h-[500px]">
      <Calendar
        animate
        mode="range"
        defaultMonth={dateRange?.from}
        selected={dateRange}
        onSelect={setDateRange}
        numberOfMonths={2}
      />
    </div>
  );
}

"use client";

import { useState } from "react";
import { DateRange } from "react-day-picker";

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

export function Calendar5Block() {
  const [dateRange, setDateRange] = useState<DateRange | undefined>({
    from: new Date(2025, 5, 12),
    to: new Date(2025, 5, 26),
  });

  return (
    <div className="flex flex-col gap-2 items-center justify-center p-5 min-h-[500px]">
      <Calendar
        animate
        mode="range"
        defaultMonth={dateRange?.from}
        selected={dateRange}
        onSelect={setDateRange}
        numberOfMonths={1}
        min={5}
      />
      <div className="text-muted-foreground text-center text-xs">
        A minimum of 5 days is required
      </div>
    </div>
  );
}

"use client";

import { useState } from "react";
import { DateRange } from "react-day-picker";

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

export function Calendar6Block() {
  const [dateRange, setDateRange] = useState<DateRange | undefined>({
    from: new Date(2025, 5, 18),
    to: new Date(2025, 6, 7),
  });

  return (
    <div className="flex flex-col gap-2 items-center justify-center p-5 min-h-[500px]">
      <Calendar
        animate
        mode="range"
        defaultMonth={dateRange?.from}
        selected={dateRange}
        onSelect={setDateRange}
        numberOfMonths={2}
        min={2}
        max={20}
      />
      <div className="text-muted-foreground text-center text-xs">
        Your stay must be between 2 and 20 nights
      </div>
    </div>
  );
}

"use client";

import { useState } from "react";

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

export function Calendar7Block() {
  const [date, setDate] = useState<Date | undefined>(new Date(2025, 5, 12));

  return (
    <div className="flex flex-col gap-2 items-center justify-center p-5 min-h-[500px]">
      <Calendar
        animate
        mode="single"
        defaultMonth={date}
        selected={date}
        onSelect={setDate}
        disabled={{
          before: new Date(2025, 5, 12),
        }}
      />
    </div>
  );
}

"use client";

import { useState } from "react";
import { DateRange } from "react-day-picker";

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

export function Calendar8Block() {
  const [dateRange, setDateRange] = useState<DateRange | undefined>({
    from: new Date(2025, 5, 17),
    to: new Date(2025, 5, 20),
  });

  return (
    <div className="flex flex-col gap-2 items-center justify-center p-5 min-h-[500px]">
      <Calendar
        animate
        mode="range"
        defaultMonth={dateRange?.from}
        selected={dateRange}
        onSelect={setDateRange}
        numberOfMonths={2}
        disabled={{ dayOfWeek: [0, 6] }}
        excludeDisabled
      />
    </div>
  );
}