--- phase: 03-calendar-integration plan: 05 type: execute wave: 1 depends_on: [] files_modified: - src/lib/calendar-events.ts - src/lib/google-calendar.ts - src/lib/apple-calendar.ts - src/lib/calendar-sync.ts - src/components/WeeklyView.tsx autonomous: true gap_closure: true must_haves: truths: - "User can connect their Google Calendar account" - "User can connect their Apple Calendar account" - "User can view calendar events alongside tasks in weekly view" - "User can manage calendar connection settings from the application" - "User's tasks and calendar events are synchronized bidirectionally" artifacts: - path: "src/lib/calendar-events.ts" provides: "Real calendar event fetching from APIs" - path: "src/lib/google-calendar.ts" provides: "Real Google Calendar API integration functions" - path: "src/lib/apple-calendar.ts" provides: "Real Apple Calendar API integration functions" - path: "src/lib/calendar-sync.ts" provides: "Complete bidirectional sync implementation" - path: "src/components/WeeklyView.tsx" provides: "Dynamic calendar event display from connected calendars" key_links: - from: "src/components/WeeklyView.tsx" to: "src/lib/calendar-events.ts" via: "fetching calendar events for display" pattern: "getCalendarEvents" - from: "src/lib/calendar-events.ts" to: "src/lib/google-calendar.ts" via: "fetching events from Google Calendar API" pattern: "getUpcomingEvents.*google" - from: "src/lib/calendar-events.ts" to: "src/lib/apple-calendar.ts" via: "fetching events from Apple Calendar API" pattern: "getUserCalendars.*apple" - from: "src/lib/calendar-sync.ts" to: "src/lib/google-calendar.ts" via: "importing events from Google Calendar API" pattern: "getUpcomingEvents.*google" - from: "src/lib/calendar-sync.ts" to: "src/lib/apple-calendar.ts" via: "importing events from Apple Calendar API" pattern: "getUserCalendars.*apple" --- # Gap Closure: Calendar Event Fetching and Sync Implementation ## Objective Complete calendar event fetching and bidirectional sync implementations to enable real calendar integration. ## Purpose Enable users to view real calendar events in the weekly view and synchronize tasks with their connected calendars. ## Output Functional calendar event fetching and bidirectional sync that integrates with real calendar APIs. ## Tasks Fix Calendar Events Fetching to Use Real APIs src/lib/calendar-events.ts Replace mock implementations with real API integration: 1. Remove hardcoded mock data from getCalendarEvents function 2. Implement real API calls to fetch calendar events from connected providers 3. Integrate with both Google and Apple calendar libraries 4. Properly handle different calendar event structures from different providers 5. Add error handling for network failures or authentication issues 6. Implement caching strategy to avoid excessive API calls The implementation should: - Check for connected calendars and their providers - Call appropriate functions from google-calendar.ts or apple-calendar.ts - Aggregate events from all connected calendars - Transform events to standardized format for display Run `npm test` for calendar events utility and verify it can fetch real events instead of returning mock data Calendar events utility fetches real events from connected calendars Complete Google Calendar API Integration src/lib/google-calendar.ts Ensure the Google Calendar library properly implements real API integration: 1. Fix any type annotation issues (remove 'any' types where possible) 2. Ensure proper API calls to Google Calendar API with access tokens 3. Add proper response handling for different Google API responses 4. Add retry logic for transient network errors 5. Implement proper error handling for unauthorized access or quota limits The implementation should: - Use actual Google API endpoints through googleapis library - Handle API response structures correctly - Provide clear error messages when API calls fail - Follow Google's API best practices Run `npm test` for google-calendar.ts and verify all functions properly interact with Google Calendar API Google Calendar API integration functions work with real Google Calendar API calls Complete Apple Calendar API Integration src/lib/apple-calendar.ts Ensure the Apple Calendar library properly implements real API integration: 1. Fix any type annotation issues (remove 'any' types where possible) 2. Implement proper API calls to Apple Calendar API 3. Add proper response handling for Apple API responses 4. Add retry logic for transient network errors 5. Implement proper error handling for unauthorized access or API rate limits The implementation should: - Make actual HTTP requests to Apple Calendar API endpoints - Handle Apple's authentication flow properly - Provide clear error messages when API calls fail - Follow Apple's API best practices Run `npm test` for apple-calendar.ts and verify all functions properly interact with Apple Calendar API Apple Calendar API integration functions work with real Apple Calendar API calls Complete Bidirectional Sync Implementation src/lib/calendar-sync.ts Replace console.log operations with actual database and calendar API operations: 1. Implement actual database storage of sync results instead of console logging 2. Implement actual API calls to import calendar events into tasks 3. Implement actual API calls to export tasks to calendar events 4. Add proper transaction handling for data consistency 5. Add conflict resolution for duplicate events/tasks 6. Implement proper error handling for sync failures 7. Add metrics collection for sync operations The implementation should: - Use Prisma ORM to persist sync results - Call appropriate functions from google-calendar.ts and apple-calendar.ts to fetch/submit events - Handle both directions of sync (calendar → tasks and tasks → calendar) - Provide detailed sync results with counts and conflicts Run `npm test` for calendar-sync.ts and verify it performs actual operations instead of just console logging Bidirectional sync performs actual database/calendar API operations Update Weekly View to Display Real Calendar Events src/components/WeeklyView.tsx Replace mock data with dynamic fetching from real calendar sources: 1. Remove hardcoded mock events from useEffect that populates calendarEvents 2. Implement proper API call to fetch real calendar events from connected calendars 3. Add loading states and proper error handling 4. Ensure events are properly formatted and styled according to their provider 5. Add loading indicators while fetching events 6. Implement fallbacks for failed API calls The implementation should: - Fetch calendar events from the appropriate API libraries - Dynamically populate the calendarEvents state with real data - Display events correctly with provider-specific styling - Handle loading and error states gracefully Verify WeeklyView component fetches and displays actual calendar events from connected calendars instead of mock data WeeklyView component displays real calendar events from connected calendars ## Verification After completing these tasks, the following checks should pass: - Calendar events are fetched from real calendar APIs instead of using mocked data - WeeklyView component displays actual calendar events instead of mock data - Bidirectional sync performs real operations instead of just logging to console - All calendar API integration functions properly interact with their respective services - Proper error handling is implemented for API failures ## Success Criteria All gaps identified in the VERIFICATION.md for calendar event fetching and sync implementations are resolved: - Calendar events are fetched from real APIs instead of mock data - WeeklyView component displays real calendar events - Bidirectional sync performs actual database/calendar API operations - All calendar API integrations work with real services