Calendar

A date input component that allows users to select a date or a list of dates based on the type prop values 'single' and 'multiple' respectively.

import { Calendar } from '@kaynora/ui'

export default function () {
  return (
    <Calendar />
  )
}

The type prop determines whether more than one value can be selected at a time.

import { Calendar } from '@kaynora/ui'

export default function () {
  return (
    <div style={{
      display: 'flex',
      flexFlow: 'column',
      gap: '80px',
    }}>
      <Calendar type='single' defaultValue={[new Date(2025, 0, 11)]} />
      <Calendar
        type='multiple'
        defaultValue={[
          new Date(2025, 0, 3),
          new Date(2025, 0, 15),
          new Date(2025, 0, 19),
        ]}
      />
    </div>
  )
}

The value and onChange props enable controlled state management.

import { Calendar } from '@kaynora/ui'

export default function () {
  return (
    <div style={{
      display: 'flex',
      flexFlow: 'column',
      gap: '40px',
    }}>
      <Calendar value={date} onChange={setDate} />
      <T>Today is: {date[0].toDateString()}</T>
    </div>
  )
}

The minValue and maxValue props determine the earliest and latest selectable dates in the calendar.

import { Calendar } from '@kaynora/ui'

export default function () {
  return (
    <Calendar
      defaultValue={[new Date(2025, 0, 17)]}
      minValue={new Date(2025, 0, 10)}
      maxValue={new Date(2025, 0, 24)}
    />
  )
}

<Calendar />

'single' | 'multiple'

Date

Date

Date[]

Date[]

(value: Date[]) => void

{
  root: HTMLDivElementProps
  date: HTMLDivElementProps
  week: HTMLDivElementProps
  days: HTMLDivElementProps
}