Loading...
Installation
Props
Prop | Type | Default | Description |
---|---|---|---|
value | Date | - | Currently selected date |
onChange | (date: Date) => void | - | Callback when date is selected |
className | string | - | Additional CSS classes |
yearRange | [number, number] | [2000, 2040] | Range of years to display |
info | Record<string, string> | {} | Date info mapping (dateKey -> info) |
Usage
import { CalendarPlanner } from "@/components/ui/calendar-planner";
const eventInfo = {
"2024-12-25": "Christmas",
"2024-01-01": "New Year",
};
function MyCalendar() {
const [selectedDate, setSelectedDate] = React.useState<Date>(new Date());
return (
<CalendarPlanner
value={selectedDate}
onChange={setSelectedDate}
info={eventInfo}
yearRange={[2020, 2030]}
/>
);
}