Command Palette

Search for a command to run...

Docs
Inbox Calendar

Inbox Calendar

Interactive inbox-style calendar with event management and scrollable timeline

Loading...

Installation

Props

PropTypeDefaultDescription
eventsInboxEvent[][]Array of calendar events
onAddEvent(event: InboxEvent) => void-Callback when adding new event
onRemoveEvent(id: string) => void-Callback when removing event

Usage

import { InboxCalendar, InboxEvent } from "@/components/ui/inbox-calendar";
 
const events: InboxEvent[] = [
  {
    id: "1",
    title: "Team Meeting",
    description: "Weekly sync with the team",
    date: new Date(),
    label: "Work",
  },
];
 
function MyCalendar() {
  const handleAddEvent = (event: InboxEvent) => {
    console.log("New event:", event);
  };
 
  const handleRemoveEvent = (id: string) => {
    console.log("Remove event:", id);
  };
 
  return (
    <InboxCalendar
      events={events}
      onAddEvent={handleAddEvent}
      onRemoveEvent={handleRemoveEvent}
    />
  );
}