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

phase	plan	type	wave	depends_on	files_modified	autonomous	must_haves
03-calendar-integration	01	execute	1		src/types/calendarEvent.ts src/lib/calendarService.ts src/components/CalendarGrid.tsx src/components/CalendarEventCard.tsx src/hooks/useCalendarEvents.ts	true	truths artifacts key_links 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 path provides exports src/types/calendarEvent.ts Calendar event type definition CalendarEvent path provides exports src/lib/calendarService.ts Calendar integration service with Google/Apple OAuth connectGoogleCalendar connectAppleCalendar fetchEvents path provides imports src/components/CalendarGrid.tsx Weekly calendar grid with calendar event display CalendarEventCard path provides min_lines src/components/CalendarEventCard.tsx Visual representation of calendar events 20 path provides exports src/hooks/useCalendarEvents.ts React hook for fetching and managing calendar events useCalendarEvents from to via pattern src/components/CalendarGrid.tsx src/components/CalendarEventCard.tsx rendering CalendarEventCard for each calendar event CalendarEventCard from to via pattern src/components/CalendarGrid.tsx src/hooks/useCalendarEvents.ts using useCalendarEvents hook to fetch events useCalendarEvents from to via pattern src/hooks/useCalendarEvents.ts src/lib/calendarService.ts calls calendarService methods calendarService.fetchEvents

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

<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>

@.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 Create CalendarEvent type definition src/types/calendarEvent.ts 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 Check that src/types/calendarEvent.ts exists and exports CalendarEvent interface CalendarEvent interface is defined with all required properties and exported

Implement calendar service with OAuth integration src/lib/calendarService.ts 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 - Initiate Google OAuth flow
• connectAppleCalendar(): Promise - Initiate Apple Calendar OAuth flow
• fetchEvents(calendarIds: string[], startDate: Date, endDate: Date): Promise<CalendarEvent[]> - Fetch events for given calendars

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

Create CalendarEventCard component src/components/CalendarEventCard.tsx 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. Check that src/components/CalendarEventCard.tsx exists and renders correctly CalendarEventCard component is implemented with proper styling and interactions

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

<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>

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