Calendar

Forms 29

About

Displays a calendar from which users can select a date or range of dates.

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

Code

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

Usage.tsx

import { useState } from "react";
import { Calendar, RangeValue } from "@/components/ui/calendar";
import { addDays, subDays } from "date-fns";

export default function MinAndMaxDatesDemo() {
  const [date7, setDate7] = useState<RangeValue | null>(null);
  const minValue = subDays(new Date().setHours(5), 1); // 2 days ago
  const maxValue = addDays(new Date(), 1); // 2 days from now
  return (
    <div className="self-start pt-30">
      <Calendar
          isDocsPage
          maxValue={maxValue}
          minValue={minValue}
          onChange={setDate7}
          value={date7}
        />
    </div>
  );
}