Calendar

"use client";import { parseDate } from "@internationalized/date";import { Calendar } from "@/components/vip-ui/calendar";export function CalendarDemo() {  return (    <Calendar      aria-label="Appointment date"      defaultValue={parseDate("2026-06-15")}    />  );}

"use client";import { isWeekend, parseDate } from "@internationalized/date";import { useLocale } from "react-aria-components";import { Calendar } from "@/components/vip-ui/calendar";export function CalendarUnavailableDemo() {  const { locale } = useLocale();  return (    <Calendar      aria-label="Available appointment days"      defaultValue={parseDate("2026-06-15")}      minValue={parseDate("2026-06-01")}      maxValue={parseDate("2026-06-30")}      isDateUnavailable={(date) => isWeekend(date, locale)}    />  );}

"use client";import {  type CalendarDate,  getLocalTimeZone,  parseDate,} from "@internationalized/date";import { useState } from "react";import { useLocale } from "react-aria-components";import { Calendar } from "@/components/vip-ui/calendar";export function CalendarControlledDemo() {  const [date, setDate] = useState<CalendarDate>(parseDate("2026-06-15"));  const { locale } = useLocale();  const formatter = new Intl.DateTimeFormat(locale, { dateStyle: "full" });  return (    <div className="grid justify-items-center gap-4">      <Calendar aria-label="Delivery date" value={date} onChange={setDate} />      <output className="text-sm text-muted-foreground">        Selected: {formatter.format(date.toDate(getLocalTimeZone()))}      </output>    </div>  );}