Calendar

1import { Calendar, type DateRange } from "@/components/wensity/calendar";
2import { useState } from "react";
3
4export function CalendarRange() {
5  const [range, setRange] = useState<DateRange | undefined>();
6  return <Calendar mode="range" selected={range} onSelect={setRange} />;
7}

1import { Calendar } from "@/components/wensity/calendar";
2import { useState } from "react";
3
4export function CalendarMultiple() {
5  const [selected, setSelected] = useState<Date[]>([]);
6  return <Calendar mode="multiple" selected={selected} onSelect={setSelected} />;
7}

1import { Calendar } from "@/components/wensity/calendar";
2import { useState } from "react";
3
4export function CalendarMonthYear() {
5  const [month, setMonth] = useState(new Date());
6  return <Calendar month={month} onMonthChange={setMonth} quickNav />;
7}

 1import { Calendar } from "@/components/wensity/calendar";
 2import { useState } from "react";
 3
 4export function CalendarBooked() {
 5  const [selected, setSelected] = useState<Date | undefined>();
 6  const bookedDates = [
 7    new Date(2026, 0, 12),
 8    new Date(2026, 0, 13),
 9    new Date(2026, 0, 18),
10  ];
11  return <Calendar selected={selected} onSelect={setSelected} bookedDates={bookedDates} />;
12}

 1import { Calendar } from "@/components/wensity/calendar";
 2import { useState } from "react";
 3
 4export function CalendarEvents() {
 5  const [selected, setSelected] = useState<Date | undefined>();
 6  const events = [
 7    { date: new Date(2026, 0, 9), label: "Design review" },
 8    { date: new Date(2026, 0, 14), label: "Team sync" },
 9  ];
10  return <Calendar selected={selected} onSelect={setSelected} events={events} />;
11}