Calendar

import { Calendar } from '@caroainc/ui-components/client'

import { Calendar } from '@caroainc/ui-components/calendar'

const [date, setDate] = useState<Date | undefined>(new Date())
 
<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
/>

const [range, setRange] = useState<DateRange | undefined>()
 
<Calendar
  mode="range"
  selected={range}
  onSelect={setRange}
  numberOfMonths={2}
/>

const [dates, setDates] = useState<Date[] | undefined>([])
 
<Calendar
  mode="multiple"
  selected={dates}
  onSelect={setDates}
/>

const today = new Date()
today.setHours(0, 0, 0, 0)
 
<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  disabled={[{ before: today }, { dayOfWeek: [0, 6] }]}
/>
// → 今日より前の日付と、土日を選択不可にする

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  captionLayout="dropdown"
/>