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

phase	plan	type	wave	depends_on	files_modified	autonomous	gap_closure	must_haves
03-calendar-integration	05	execute	1		src/lib/calendar-events.ts src/lib/google-calendar.ts src/lib/apple-calendar.ts src/lib/calendar-sync.ts src/components/WeeklyView.tsx	true	true	truths artifacts key_links 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 path provides src/lib/calendar-events.ts Real calendar event fetching from APIs path provides src/lib/google-calendar.ts Real Google Calendar API integration functions path provides src/lib/apple-calendar.ts Real Apple Calendar API integration functions path provides src/lib/calendar-sync.ts Complete bidirectional sync implementation path provides src/components/WeeklyView.tsx Dynamic calendar event display from connected calendars from to via pattern src/components/WeeklyView.tsx src/lib/calendar-events.ts fetching calendar events for display getCalendarEvents from to via pattern src/lib/calendar-events.ts src/lib/google-calendar.ts fetching events from Google Calendar API getUpcomingEvents.*google from to via pattern src/lib/calendar-events.ts src/lib/apple-calendar.ts fetching events from Apple Calendar API getUserCalendars.*apple from to via pattern src/lib/calendar-sync.ts src/lib/google-calendar.ts importing events from Google Calendar API getUpcomingEvents.*google from to via pattern src/lib/calendar-sync.ts src/lib/apple-calendar.ts importing events from Apple Calendar API 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