Calendar

react-day-picker ベースの日付カレンダー。

単日・複数日・期間を選べるカレンダーです。ダッシュボードで期間を選ばせたい場合は、これを直接使うより DateRangePicker の方が手早く済みます。

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";

props は react-day-picker の DayPicker そのままで、Vantage 側で足しているのは次の 3 つだけです。

PropType

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

月・年の見出しをテキストにするかセレクトにするか。

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

Default"label"

buttonVariant?Button の variant

前後の月へ送るボタンの見た目。

TypeButton の variant

Default"ghost"

showOutsideDays?boolean

前後の月の日を薄く表示するか。

Typeboolean

Defaulttrue

mode は "single" / "multiple" / "range" で、selected と onSelect の型がそれに追従します。CalendarDayButton は 1 日分のセルで、日付の下にドットやラベルを描きたいときに差し替えます。