Calendar

Calendar displays the grid of days in a month and allow users to select a single date.

Basic usage

June 2025

const Demo = () => {
  const [value, setValue] = useState(new Date("2022-02-14"));

  return <Calendar value={value} onClick={setValue} />;
};

With min and max date

When a minimum or maximum date is specified, these dates are grayed out and cannot be selected.

June 2025

const Demo = () => {
  const [value, setValue] = useState(new Date("2022-02-14"));

  return (
    <Calendar
      maxDate={new Date("2022-02-24")}
      minDate={new Date("2022-02-04")}
      value={new Date("2022-02-15")}
      onClick={setValue}
    />
  );
};