Reshaped Calendar

Functional without any properties by default, rendering the current month with single date selection and a month-selection view. Supports controlled and uncontrolled values, range selection, rendering multiple months, individual selected and disabled dates, min/max boundaries, localization and a configurable first week day.

by reshaped

import { Reshaped } from "reshaped/bundle";
import Calendar from "@/components/ui/reshaped-calendar";

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ maxWidth: 360, width: "100%", margin: "0 auto", padding: 24 }}>
        <Calendar defaultMonth={new Date(2023, 0)} />
      </div>
    </Reshaped>
  );
}