Calendar

The Calendar component provides an intuitive and customizable way to select dates in your application.

Usage

First of all, you need to import the Calendar component from the kitchn package.

import { Calendar } from "kitchn";

Single date selection

Single Date Selection

Code Editor

() => {
    const [selected, setSelected] = React.useState(new Date());
    
    return (
      <Container gap={"small"}>
        <Text>{"Single Date Selection"}</Text>
        <Calendar 
          mode={"single"} 
          selected={selected} 
          onSelect={setSelected}
        />
      </Container>
    );
  }

Multiple date selection

Multiple Date Selection

Code Editor

() => {
    const [selectedDays, setSelectedDays] = React.useState([]);
    
    return (
      <Container gap={"small"}>
        <Text>{"Multiple Date Selection"}</Text>
        <Calendar 
          mode={"multiple"} 
          selected={selectedDays} 
          onSelect={setSelectedDays}
        />
      </Container>
    );
  }

Date Range Selection

Code Editor

() => {
    const [dateRange, setDateRange] = React.useState({
      from: undefined,
      to: undefined
    });
    
    return (
      <Container gap={"small"}>
        <Text>{"Date Range Selection"}</Text>
        <Calendar 
          mode={"range"} 
          selected={dateRange} 
          onSelect={setDateRange}
        />
      </Container>
    );
  }

Props

Name	Type	Default	Required	Description	Accepted values
`mode`	`string`	`"single"`	✅	The selection mode of the calendar.	`"single"`, `"multiple"`, `"range"`
`selected`	`Date \| Date[] \| DateRange \| undefined`	`undefined`	-	The currently selected date(s). Type depends on mode.	-
`onSelect`	`(date: Date \| Date[] \| DateRange) => void`	`-`	✅	Callback function when a date is selected.	-

About

The Calendar component is built on top of React DayPicker (opens in a new tab), providing a robust foundation for date picking functionality.

Last updated on February 11, 2025

Button Checkbox