My-Weekly-ToDo-List/.planning/phases/03-calendar-integration/03-01-PLAN.md

---
phase: 03-calendar-integration
plan: 01
type: execute
wave: 1
depends_on: []
files_modified: 
  - src/types/calendarEvent.ts
  - src/lib/calendarService.ts
  - src/components/CalendarGrid.tsx
  - src/components/CalendarEventCard.tsx
  - src/hooks/useCalendarEvents.ts
autonomous: true
must_haves:
  truths:
    - "User can connect their Google Calendar account through a secure authorization flow"
    - "User can connect their Apple Calendar account through a secure authorization flow"
    - "Events from connected calendars appear in the weekly view alongside user tasks"
  artifacts:
    - path: "src/types/calendarEvent.ts"
      provides: "Calendar event type definition"
      exports: ["CalendarEvent"]
    - path: "src/lib/calendarService.ts"
      provides: "Calendar integration service with Google/Apple OAuth"
      exports: ["connectGoogleCalendar", "connectAppleCalendar", "fetchEvents"]
    - path: "src/components/CalendarGrid.tsx"
      provides: "Weekly calendar grid with calendar event display"
      imports: ["CalendarEventCard"]
    - path: "src/components/CalendarEventCard.tsx"
      provides: "Visual representation of calendar events"
      min_lines: 20
    - path: "src/hooks/useCalendarEvents.ts"
      provides: "React hook for fetching and managing calendar events"
      exports: ["useCalendarEvents"]
  key_links:
    - from: "src/components/CalendarGrid.tsx"
      to: "src/components/CalendarEventCard.tsx"
      via: "rendering CalendarEventCard for each calendar event"
      pattern: "CalendarEventCard"
    - from: "src/components/CalendarGrid.tsx"
      to: "src/hooks/useCalendarEvents.ts"
      via: "using useCalendarEvents hook to fetch events"
      pattern: "useCalendarEvents"
    - from: "src/hooks/useCalendarEvents.ts"
      to: "src/lib/calendarService.ts"
      via: "calls calendarService methods"
      pattern: "calendarService.fetchEvents"
---

<objective>
Implement calendar event integration to display Google and Apple Calendar events alongside user tasks in the weekly view.
</objective>

<execution_context>
@~/.config/opencode/get-shit-done/workflows/execute-plan.md
@~/.config/opencode/get-shit-done/templates/summary.md

# Context from previous phases
- Phase 1 established the foundational components for the weekly calendar view
- Phase 2 enhanced the UI with advanced features and data persistence
- Current codebase has CalendarGrid.tsx, TaskCard.tsx, and taskPersistence.ts
- Calendar events need to be seamlessly integrated into the existing UI structure
</execution_context>

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/STATE.md
@.planning/phases/01-setup-foundation/01-01-SUMMARY.md
@.planning/phases/01-setup-foundation/01-02-SUMMARY.md
@.planning/phases/02-user-experience-advanced-features/02-01-SUMMARY.md
@.planning/phases/03-calendar-integration/03-CONTEXT.md
</context>

<tasks>

<task type="auto">
  <name>Create CalendarEvent type definition</name>
  <files>src/types/calendarEvent.ts</files>
  <action>Create TypeScript interface for calendar events with required properties:
- id: string
- title: string
- start: Date
- end: Date (optional)
- description?: string
- calendarId: string
- calendarName: string
- recurring?: 'daily' | 'weekly' | 'monthly'
- allDay?: boolean

Export the interface as CalendarEvent
</action>
  <verify>Check that src/types/calendarEvent.ts exists and exports CalendarEvent interface</verify>
  <done>CalendarEvent interface is defined with all required properties and exported</done>
</task>

<task type="auto">
  <name>Implement calendar service with OAuth integration</name>
  <files>src/lib/calendarService.ts</files>
  <action>Create a calendar service that handles:
1. Google Calendar OAuth2 integration using redirect flow (client ID required)
2. Apple Calendar OAuth (approach to be determined by OpenCode)
3. Fetching events from connected calendars
4. Converting calendar event data to our CalendarEvent type

Implement these methods:
- connectGoogleCalendar(): Promise<void> - Initiate Google OAuth flow
- connectAppleCalendar(): Promise<void> - Initiate Apple Calendar OAuth flow
- fetchEvents(calendarIds: string[], startDate: Date, endDate: Date): Promise&lt;CalendarEvent[]&gt; - Fetch events for given calendars

Use localStorage for storing calendar tokens and connected account info.
</action>
  <verify>Check that src/lib/calendarService.ts exists with the required methods</verify>
  <done>Calendar service implements Google and Apple OAuth flows and event fetching</done>
</task>

<task type="auto">
  <name>Create CalendarEventCard component</name>
  <files>src/components/CalendarEventCard.tsx</files>
  <action>Create a React component that renders a calendar event with:
- Title of the event
- Time or date information (start time, all-day indicator)
- Calendar name for identification
- Visual distinction from task cards (outlined instead of filled, different color)
- Hover or click behavior to show details

Use Tailwind classes for styling with a consistent UI pattern that distinguishes calendar events from user tasks.
</action>
  <verify>Check that src/components/CalendarEventCard.tsx exists and renders correctly</verify>
  <done>CalendarEventCard component is implemented with proper styling and interactions</done>
</task>

</tasks>

<verification>
Ensure all calendar event integration is functioning:
1. CalendarEvent type is correctly defined
2. Calendar service handles Google and Apple OAuth properly
3. CalendarEventCard component renders with correct styling
4. The calendar grid can display both user tasks and calendar events
</verification>

<success_criteria>
- Google Calendar authentication flow is implemented
- Apple Calendar authentication flow is implemented
- Calendar events are fetched and displayed in the weekly view
- Calendar events are visually distinct from user tasks
- Events appear alongside user tasks in the same time slots
</success_criteria>

<output>
After completion, create `.planning/phases/03-calendar-integration/03-01-SUMMARY.md`
</output>