Calendar

A single date picker component that displays one or more date grids and allows users to select a single date.

Prerequisite

Calendar component requires additional dependency of @internationalized/date to be installed.

We will be working on removing this additional dependency in the future.

npm install --save @internationalized/date

Import

import { Calendar } from "@sparrowengg/twigs-react";
import { parseDate } from "@internationalized/date";

Usage

function App() {
  const [value, setValue] = React.useState(parseDate("2025-08-24"));

  return (
    <Calendar
      onChange={setValue}
      value={value}
      minValue={parseDate("2025-08-20")}
    />
  );
}

Examples

Calendar with customization

Props

Prop	Type	Default
`value?`	`DateValue`	-
`defaultValue?`	`DateValue`	-
`onChange?`	`(value: DateValue) => void`	-
`minValue?`	`DateValue`	-
`maxValue?`	`DateValue`	-
`isDisabled?`	`boolean`	`false`
`isReadOnly?`	`boolean`	`false`
`isDateUnavailable?`	`(date: DateValue) => boolean`	-
`autoFocus?`	`boolean`	`false`
`focusedValue?`	`DateValue`	-
`defaultFocusedValue?`	`DateValue`	-
`onFocusChange?`	`(date: DateValue) => void`	-
`size?`	`'sm' \| 'md' \| 'lg'`	`lg`
`showFooter?`	`boolean`	`true`
`footerActionText?`	`string`	`'Select'`
`footerAction?`	`(state: CalendarState) => void`	-
`renderFooter?`	`(state: CalendarState) => ReactNode`	-
`onDaySelect?`	`(date: DateValue) => void`	-
`onMonthSelect?`	`(date: DateValue) => void`	-
`onYearSelect?`	`(date: DateValue) => void`	-
`showTimePicker?`	`boolean`	`false`
`showTimezonePicker?`	`boolean`	`false`
`hourCycle?`	`12 \| 24`	`12`
`containerCSS?`	`CSS Object`	-

Calendar

Prerequisite

Import

Usage

Examples

Calendar with customization

Props

Calendar

On this page