Calendar

The date calendar, built on react-day-picker.

A calendar for single dates, multiple dates or a range. For picking a period on a dashboard, DateRangePicker gets you there faster than using this directly.

export const client = "only";

import { useState } from "react";
import { Calendar } from "@squadbase/vantage/ui";

export default function Example() {
  const [date, setDate] = useState(new Date(2026, 6, 23));
  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      captionLayout="dropdown"
      className="rounded-lg border"
    />
  );
}

import { Calendar, CalendarDayButton } from "@squadbase/vantage/ui";

The props are react-day-picker’s DayPicker props. Vantage adds only three of its own:

PropType

captionLayout?"label" | "dropdown" | "dropdown-months" | "dropdown-years"

Whether the month/year caption is text or a select.

Type"label" | "dropdown" | "dropdown-months" | "dropdown-years"

Default"label"

buttonVariant?Button variant

Look of the previous/next month buttons.

TypeButton variant

Default"ghost"

showOutsideDays?boolean

Dim and show the neighbouring months' days.

Typeboolean

Defaulttrue

mode is "single" / "multiple" / "range", and the types of selected and onSelect follow it. CalendarDayButton is one day cell — swap it when you want a dot or label under the date.