Documentation
Components
Calendar

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

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

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

() => {
    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>
    );
  }
↓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

NameTypeDefaultRequiredDescriptionAccepted values
modestring"single"✅The selection mode of the calendar."single", "multiple", "range"
selectedDate | Date[] | DateRange | undefinedundefined-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.

ButtonCheckbox