Wensity

Calendar

Date grids for single, range, and multi-date selection, with month navigation and event-ready day rendering.

calendardatedate pickerschedulingrangeevents
Loading preview

Examples

Practical examples and common states for the same installable component.

Range

Selects a continuous range of dates.

examples/calendar-range.tsx
import { Calendar, type DateRange } from "@/components/wensity/calendar";
import { useState } from "react";


export function CalendarRange() {
  const [range, setRange] = useState<DateRange | undefined>();
  return <Calendar mode="range" selected={range} onSelect={setRange} />;
}

Multiple

Selects multiple independent dates.

examples/calendar-multiple.tsx
import { Calendar } from "@/components/wensity/calendar";
import { useState } from "react";


export function CalendarMultiple() {
  const [selected, setSelected] = useState<Date[]>([]);
  return <Calendar mode="multiple" selected={selected} onSelect={setSelected} />;
}

Month Year

Fast month and year navigation.

examples/calendar-month-year.tsx
import { Calendar } from "@/components/wensity/calendar";
import { useState } from "react";


export function CalendarMonthYear() {
  const [month, setMonth] = useState(new Date());
  return <Calendar month={month} onMonthChange={setMonth} quickNav />;
}

Booked

Highlights unavailable and reserved dates.

examples/calendar-booked.tsx
import { Calendar } from "@/components/wensity/calendar";
import { useState } from "react";


export function CalendarBooked() {
  const [selected, setSelected] = useState<Date | undefined>();
  const bookedDates = [
    new Date(2026, 0, 12),
    new Date(2026, 0, 13),
    new Date(2026, 0, 18),
  ];
  return <Calendar selected={selected} onSelect={setSelected} bookedDates={bookedDates} />;
}

Events

Displays indicators for scheduled dates.

examples/calendar-events.tsx
import { Calendar } from "@/components/wensity/calendar";
import { useState } from "react";


export function CalendarEvents() {
  const [selected, setSelected] = useState<Date | undefined>();
  const events = [
    { date: new Date(2026, 0, 9), label: "Design review" },
    { date: new Date(2026, 0, 14), label: "Team sync" },
  ];
  return <Calendar selected={selected} onSelect={setSelected} events={events} />;
}

Props

PropTypeDefaultDescription
mode"single" | "range" | "multiple""single"Selection model. Changes the shape of selected and onSelect.
selectedDate | Date[] | DateRange-Controlled selection. Type follows mode.
defaultSelectedDate | Date[] | DateRange-Initial selection when uncontrolled.
onSelect(value: Date | Date[] | DateRange | undefined) => void-Called when the selection changes. Argument follows mode.
monthDate-Controlled displayed month.
defaultMonthDate-Initial displayed month. Defaults to the current month.
onMonthChange(month: Date) => void-Called when the displayed month changes.
weekStartsOn0 | 10First day of the week. 0 is Sunday, 1 is Monday.
disabled(date: Date) => boolean-Return true to block a date from selection.
bookedDatesDate[]-Unavailable dates, shown struck through and disabled.
eventsCalendarEvent[]-Dates that carry a scheduled-event indicator dot.
quickNavbooleantrueEnables the fast month and year jump view from the header.