Command Palette

Search for a command to run...

Docs
Priority Pyramid Calendar

Priority Pyramid Calendar

A pyramid-style calendar that organizes events by priority levels with visual hierarchy

Loading...

Installation

Props

PropTypeDefaultDescription
initialEventsEvent[][]Array of initial events
onEventsChange(events: Event[]) => void-Callback when events change

Usage

import {
  PriorityPyramidCalendar,
  Event,
} from "@/components/ui/priority-pyramid-calendar";
 
const events: Event[] = [
  {
    id: 1,
    title: "High Priority Task",
    date: new Date(),
    priority: 1,
  },
];
 
function MyCalendar() {
  const [events, setEvents] = React.useState<Event[]>([]);
 
  return (
    <PriorityPyramidCalendar
      initialEvents={events}
      onEventsChange={setEvents}
    />
  );
}