Range calendar

"use client";import { parseDate } from "@internationalized/date";import { RangeCalendar } from "@/components/vip-ui/range-calendar";export function RangeCalendarDemo() {  return (    <RangeCalendar      aria-label="Trip dates"      defaultValue={{        start: parseDate("2026-06-18"),        end: parseDate("2026-06-24"),      }}    />  );}

"use client";import { parseDate } from "@internationalized/date";import { RangeCalendar } from "@/components/vip-ui/range-calendar";export function RangeCalendarLimitsDemo() {  return (    <RangeCalendar      aria-label="Available trip dates in June"      minValue={parseDate("2026-06-01")}      maxValue={parseDate("2026-06-30")}      isDateUnavailable={(date) =>        date.compare(parseDate("2026-06-18")) >= 0 &&        date.compare(parseDate("2026-06-19")) <= 0      }      defaultValue={{        start: parseDate("2026-06-15"),        end: parseDate("2026-06-17"),      }}    />  );}

"use client";import { getLocalTimeZone, parseDate } from "@internationalized/date";import { useState } from "react";import { type DateRange, useLocale } from "react-aria-components";import { RangeCalendar } from "@/components/vip-ui/range-calendar";export function RangeCalendarControlledDemo() {  const [range, setRange] = useState<DateRange>({    start: parseDate("2026-06-18"),    end: parseDate("2026-06-24"),  });  const { locale } = useLocale();  const formatter = new Intl.DateTimeFormat(locale, { dateStyle: "medium" });  const format = (date: DateRange["start"]) =>    formatter.format(date.toDate(getLocalTimeZone()));  const nights = range.end.compare(range.start);  return (    <div className="grid justify-items-center gap-4">      <RangeCalendar        aria-label="Trip dates"        value={range}        onChange={setRange}      />      <output className="text-sm text-muted-foreground">        {format(range.start)} – {format(range.end)} · {nights}{" "}        {nights === 1 ? "night" : "nights"}      </output>    </div>  );}

"use client";import { parseDate } from "@internationalized/date";import { RangeCalendar } from "@/components/vip-ui/range-calendar";export function RangeCalendarMonthsDemo() {  return (    <RangeCalendar      aria-label="Trip dates"      visibleDuration={{ months: 2 }}      pageBehavior="single"      defaultValue={{        start: parseDate("2026-06-26"),        end: parseDate("2026-07-04"),      }}    />  );}