Single selection

Live example of Calendar with mode="single".

Pick one date. The value is Temporal.PlainDate or Temporal.PlainDateTime when includeTime is enabled.

Selected —

import { useState } from 'react'
import type { DateValue } from '@reactleaf/calendar'
import { Calendar } from '@reactleaf/calendar'
import '@reactleaf/calendar/index.css'

export function Example() {
  const [date, setDate] = useState<DateValue | null>(null)
  return <Calendar mode="single" value={date} onSelect={setDate} />
}

Props

Calendar props: shared base options, then mode-specific fields for single, multiple, and range.

Multiple selection

Live example of Calendar with mode="multiple".