Range Calendar With Presets

A range date picker calendar with a sidebar of quick presets (Today, Yesterday, Last 7 days, Last 30 days, Month to date, Last month, Year to date, Last year) for fast range selection.

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

import Calendar from "@/components/ui/c-calendar-16";

export default function Demo() {
  return (
    <div className="flex items-center justify-center p-8">
      <Calendar />
    </div>
  );
}