Calendar With Presets

Installation

Usage

import { Calendar } from "@/components/ruixen/calendar-with-presets";
import { useState } from "react";
import { DateRange } from "react-day-picker";
 
export default function App() {
  const [date, setDate] = useState<DateRange | undefined>();
 
  return (
    <Calendar
      mode="range"
      selected={date}
      onSelect={setDate}
      className="rounded-md border"
    />
  );
}

Props

All props from react-day-picker are supported, plus:

Features

• Preset Ranges: Quick selection of common date ranges
• Sidebar Navigation: Easy access to preset options
• Range Selection: Select date ranges with visual feedback
• Custom Styling: Highly customizable with Tailwind CSS
• Responsive Design: Works on all screen sizes
• Accessibility: Full keyboard and screen reader support