Calendar canvas for displaying events and picking meeting times. Use when showing calendar views or when users need to select available time slots.
Display calendar views and enable interactive meeting time selection.
Try asking Claude:
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-pickerInteractive scenario for selecting a free time slot when viewing multiple people's calendars.
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
}'
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
}
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
}
Display scenario:
←/→ or h/l: Navigate between daysn or PageDown: Next weekp or PageUp: Previous weekt: Jump to todayq or Esc: QuitMeeting picker scenario:
←/→: Navigate weekst: Jump to todayq or Esc: Cancel selectioninterface MeetingSelection {
startTime: string; // ISO datetime
endTime: string; // ISO datetime
duration: number; // Minutes
}
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}`);
}