Calendar Canvas

Display calendar views and enable interactive meeting time selection.

Example Prompts

Try asking Claude:

• "Schedule a 30-minute meeting with Alice and Bob sometime next week"

• "Find a time when the engineering team is all free on Tuesday"

• "Show me my calendar for this week"

• "When is everyone available for a 1-hour planning session?"

• "Block off 2-4pm on Friday for focused work"

Scenarios

display (default)

View-only calendar display. User can navigate weeks but cannot select times.

bun run src/cli.ts show calendar --scenario display --config '{ "title": "My Week", "events": [ {"id": "1", "title": "Meeting", "startTime": "2025-01-06T09:00:00", "endTime": "2025-01-06T10:00:00"} ] }'

meeting-picker

Interactive scenario for selecting a free time slot when viewing multiple people's calendars.

• Shows multiple calendars overlaid with different colors

• User can click on free slots to select a meeting time

• Selection is sent back via IPC

• Supports configurable time slot granularity (15/30/60 min)

bun run src/cli.ts spawn calendar --scenario meeting-picker --config '{ "calendars": [ { "name": "Alice", "color": "blue", "events": [ {"id": "1", "title": "Standup", "startTime": "2025-01-06T09:00:00", "endTime": "2025-01-06T09:30:00"} ] }, { "name": "Bob", "color": "green", "events": [ {"id": "2", "title": "Call", "startTime": "2025-01-06T14:00:00", "endTime": "2025-01-06T15:00:00"} ] } ], "slotGranularity": 30, "minDuration": 30, "maxDuration": 120 }'

Configuration

Display Config

interface CalendarConfig { title?: string; events: CalendarEvent[]; }

interface CalendarEvent { id: string; title: string; startTime: string; // ISO datetime endTime: string; // ISO datetime color?: string; // blue, green, red, yellow, magenta, cyan }

Meeting Picker Config

interface MeetingPickerConfig { calendars: Calendar[]; slotGranularity?: number; // 15, 30, or 60 minutes (default: 30) minDuration?: number; // Minimum meeting duration in minutes maxDuration?: number; // Maximum meeting duration in minutes }

interface Calendar { name: string; // Person's name color: string; // Calendar color events: CalendarEvent[]; // Their busy times }

Controls

Display scenario:

• ←/→ or h/l : Navigate between days

• n or PageDown : Next week

• p or PageUp : Previous week

• t : Jump to today

• q or Esc : Quit

Meeting picker scenario:

• Mouse click: Select a free time slot

• ←/→ : Navigate weeks

• t : Jump to today

• q or Esc : Cancel selection

Selection Result

interface MeetingSelection { startTime: string; // ISO datetime endTime: string; // ISO datetime duration: number; // Minutes }

API Usage

import { pickMeetingTime } from "${CLAUDE_PLUGIN_ROOT}/src/api";

const result = await pickMeetingTime({ calendars: [ { name: "Alice", color: "blue", events: [...] }, { name: "Bob", color: "green", events: [...] }, ], slotGranularity: 30, });

if (result.success && result.data) { console.log(Selected: ${result.data.startTime} - ${result.data.endTime}); }