tui-canvas: Skill for OpenCode

Calendar Canvas

Display calendar views and enable interactive meeting time selection.

Example Prompts

• "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. Shows events in a weekly view.

canvas_calendar({
  scenario: "display",
  config: JSON.stringify({
    title: "My Week",
    events: [
      {
        id: "1",
        title: "Team Standup",
        startTime: "2026-01-12T09:00:00",
        endTime: "2026-01-12T09:30:00",
        color: "blue"
      }
    ]
  })
})

meeting-picker

Interactive scenario for selecting a free time slot across multiple calendars.

• Shows multiple calendars overlaid with different colors
• User can click on free slots to select a meeting time
• Supports configurable time slot granularity (15/30/60 min)

canvas_calendar({
  scenario: "meeting-picker",
  config: JSON.stringify({
    calendars: [
      {
        name: "Alice",
        color: "blue",
        events: [
          { id: "1", title: "Standup", startTime: "2026-01-12T09:00:00", endTime: "2026-01-12T09:30:00" }
        ]
      },
      {
        name: "Bob",
        color: "green",
        events: [
          { id: "2", title: "Call", startTime: "2026-01-12T14:00:00", endTime: "2026-01-12T15:00:00" }
        ]
      }
    ],
    slotGranularity: 30,
    minDuration: 30,
    maxDuration: 120
  })
})

Configuration Types

Display Config

interface CalendarConfig {
  title?: string;
  events: CalendarEvent[];
  weekStart?: number;  // 0 = Sunday, 1 = Monday
}

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