Command Palette

Search for a command to run...

Docs
Calendar Planner

Calendar Planner

A comprehensive calendar planner with month/year view switching and event information display

Loading...

Installation

Props

PropTypeDefaultDescription
valueDate-Currently selected date
onChange(date: Date) => void-Callback when date is selected
classNamestring-Additional CSS classes
yearRange[number, number][2000, 2040]Range of years to display
infoRecord<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]}
    />
  );
}