Reshaped Calendar

Component

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Reshaped Calendar to your project and fits it to your theme.

Code

How Reshaped Calendar is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import { Reshaped, View } from "reshaped/bundle";
import Calendar from "@/components/ui/reshaped-calendar";

function Component() {
  const [selectedDates, setSelectedDates] = React.useState([
    new Date(2023, 0, 10),
    new Date(2023, 0, 13),
    new Date(2023, 0, 25),
  ]);
  return (
    <View maxWidth="360px">
      <Calendar
        defaultMonth={new Date(2023, 0)}
        selectedDates={selectedDates}
        value={null}
        onChange={(args) => {
          let selected = false;
          const nextDates = selectedDates.filter((d) => {
            const match = +d === +args.value;
            if (match) selected = true;
            return !match;
          });
          if (!selected) nextDates.push(args.value);
          setSelectedDates(nextDates);
        }}
      />
    </View>
  );
}

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