Calendar
日付選択カレンダーコンポーネント。DatePicker / DateRangePickerの内部でも使用。
インポート
import { Calendar } from '@caroainc/ui-components/client'個別サブパス（バンドルサイズを抑えたい場合）:
import { Calendar } from '@caroainc/ui-components/calendar'react-day-picker / date-fns に依存するため /client エントリポイントのみで提供されます（/server からは export されません）。
基本的な使い方（単一選択）
Loading...
const [date, setDate] = useState<Date | undefined>(new Date())
<Calendar
mode="single"
selected={date}
onSelect={setDate}
/>範囲選択
Loading...
const [range, setRange] = useState<DateRange | undefined>()
<Calendar
mode="range"
selected={range}
onSelect={setRange}
numberOfMonths={2}
/>複数選択
Loading...
const [dates, setDates] = useState<Date[] | undefined>([])
<Calendar
mode="multiple"
selected={dates}
onSelect={setDates}
/>日付の無効化
disabled にMatcher（単一条件またはMatcher配列）を渡すと、条件に一致する日付が選択不可になります。
Loading...
const today = new Date()
today.setHours(0, 0, 0, 0)
<Calendar
mode="single"
selected={date}
onSelect={setDate}
disabled={[{ before: today }, { dayOfWeek: [0, 6] }]}
/>
// → 今日より前の日付と、土日を選択不可にする月・年ドロップダウン表示
captionLayout="dropdown" を指定すると、月と年をドロップダウンで移動できます。
Loading...
<Calendar
mode="single"
selected={date}
onSelect={setDate}
captionLayout="dropdown"
/>Props
react-day-pickerのDayPickerPropsを継承しています。主なPropsのみ抜粋します。
| Prop | Type | Default | Description |
|---|---|---|---|
mode | 'single' | 'range' | 'multiple' | 'single' | 選択モード |
selected | Date | DateRange | Date[] | - | 選択された日付 |
onSelect | (date) => void | - | 日付が選択された時のコールバック |
disabled | Matcher | Matcher[] | - | 無効にする日付の条件（{ before: Date }、{ after: Date }、{ dayOfWeek: number[] } など） |
numberOfMonths | number | 1 | 同時に表示する月数 |
captionLayout | 'label' | 'buttons' | 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label' | キャプション（月・年移動UI）の表示形式 |
showOutsideDays | boolean | true | 前後の月の日付を表示するか |
locale | Locale (date-fns) | ja | ロケール。month/weekday等の表記に反映される |
buttonVariant | Button の variant | 'ghost' | 前後月移動ボタンのバリアント |
className | string | - | 追加のクラス名 |
注意事項
modeによってselected/onSelectの型が変わります（singleはDate、rangeはDateRange、multipleはDate[]）- 通常はDatePicker / DateRangePickerを使うことを推奨します。Calendar単体はカスタムUIを組む場合に使用してください
localeのcode（例:'ja','en-US'）はそのままIntlの月名フォーマットに渡されるため、date-fnsが提供する任意のロケールをそのまま使用できます