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.

canvas_spawn({
  kind: "calendar",
  scenario: "display",
  config: JSON.stringify({
    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)

canvas_spawn({
  kind: "calendar",
  scenario: "meeting-picker",
  config: JSON.stringify({
    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

// Spawn meeting picker
const result = canvas_spawn({
  kind: "calendar",
  scenario: "meeting-picker",
  config: JSON.stringify({
    calendars: [
      { name: "Alice", color: "blue", events: [...] },
      { name: "Bob", color: "green", events: [...] },
    ],
    slotGranularity: 30,
  })
});

// Wait for user interaction, then close
// The canvas will send selection via IPC when user clicks