diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md
index 2b1f010..5a172aa 100644
--- a/.planning/ROADMAP.md
+++ b/.planning/ROADMAP.md
@@ -72,6 +72,13 @@ This roadmap delivers a weekly scheduler with calendar integration in five phase
### Phase 3: Calendar Integration
**Goal:** Enable connection to external calendar services and display calendar events alongside user tasks.
+**Plans:** 3 plans
+
+**Plans:**
+- [ ] 03-01-PLAN.md — Implement calendar event integration for Google and Apple Calendar
+- [ ] 03-02-PLAN.md — Implement calendar event filtering and detail viewing
+- [ ] 03-03-PLAN.md — Implement visual styling for calendar events
+
**Requirements:**
- CAL-01: User can connect their Google Calendar account to the application
- CAL-02: User can connect their Apple Calendar account to the application
diff --git a/.planning/phases/03-calendar-integration/03-01-PLAN.md b/.planning/phases/03-calendar-integration/03-01-PLAN.md
new file mode 100644
index 0000000..8e3aa60
--- /dev/null
+++ b/.planning/phases/03-calendar-integration/03-01-PLAN.md
@@ -0,0 +1,153 @@
+---
+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"
+---
+
+
+Implement calendar event integration to display Google and Apple Calendar events alongside user tasks in the weekly view.
+
+
+
+@~/.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
+
+
+
+@.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
+
+
+
+- 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
+
+
+
\ No newline at end of file
diff --git a/.planning/phases/03-calendar-integration/03-02-PLAN.md b/.planning/phases/03-calendar-integration/03-02-PLAN.md
new file mode 100644
index 0000000..58fd79b
--- /dev/null
+++ b/.planning/phases/03-calendar-integration/03-02-PLAN.md
@@ -0,0 +1,144 @@
+---
+phase: 03-calendar-integration
+plan: 02
+type: execute
+wave: 1
+depends_on: []
+files_modified:
+ - src/components/CalendarGrid.tsx
+ - src/hooks/useCalendarEvents.ts
+ - src/components/CalendarEventFilter.tsx
+autonomous: true
+must_haves:
+ truths:
+ - "User can view event details when selecting calendar events in the view"
+ - "User can toggle visibility of calendar events on/off in the weekly view"
+ artifacts:
+ - path: "src/components/CalendarGrid.tsx"
+ provides: "Calendar grid with event filtering and detail views"
+ imports: ["CalendarEventCard", "CalendarEventFilter"]
+ - path: "src/hooks/useCalendarEvents.ts"
+ provides: "React hook for fetching, filtering, and managing calendar events"
+ exports: ["useCalendarEvents"]
+ - path: "src/components/CalendarEventFilter.tsx"
+ provides: "UI component for toggling calendar event visibility"
+ min_lines: 30
+ key_links:
+ - from: "src/components/CalendarGrid.tsx"
+ to: "src/components/CalendarEventFilter.tsx"
+ via: "CalendarGrid renders CalendarEventFilter component"
+ pattern: "CalendarEventFilter"
+ - 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 and manage events"
+ pattern: "useCalendarEvents"
+ - from: "src/hooks/useCalendarEvents.ts"
+ to: "src/lib/calendarService.ts"
+ via: "calls calendarService methods"
+ pattern: "calendarService.fetchEvents"
+---
+
+
+Implement calendar event filtering and detail viewing capabilities in the weekly view.
+
+
+
+@~/.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
+- Phase 3 Plan 1 has implemented basic calendar event integration
+- Current codebase has CalendarGrid.tsx, CalendarEventCard.tsx, and calendarService.ts
+- Need to add filtering and detail viewing capabilities to complete the feature set
+
+
+
+@.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
+@.planning/phases/03-calendar-integration/03-01-PLAN.md
+
+
+
+
+
+ Enhance CalendarGrid to integrate CalendarEventFilter
+ src/components/CalendarGrid.tsx
+ Modify CalendarGrid.tsx to:
+1. Import and render CalendarEventFilter component at the top of the grid
+2. Pass down the calendar filtering state and callback to the filter component
+3. Render calendar events alongside user tasks in the grid cells
+4. Handle the case where calendar events and tasks may overlap in time slots
+
+Update the component to accept calendarEvents prop and pass it to the render logic.
+
+ Check that CalendarGrid.tsx imports and renders CalendarEventFilter and displays calendar events
+ CalendarGrid component integrates CalendarEventFilter and displays calendar events alongside tasks
+
+
+
+ Implement CalendarEventFilter component
+ src/components/CalendarEventFilter.tsx
+ Create a React component that allows users to:
+1. Toggle visibility of different calendar accounts
+2. Remember user preferences for filter settings (localStorage)
+3. Display toggle controls for each connected calendar
+4. Show/hide events in the calendar grid based on selections
+
+The component should:
+- Get connected calendar list from calendar service
+- Display toggle buttons with calendar names
+- Manage state for which calendars are visible
+- Store preference in localStorage
+- Provide toggle callbacks to parent components
+
+ Check that CalendarEventFilter.tsx exists and correctly manages calendar visibility toggles
+ CalendarEventFilter component properly manages and displays calendar visibility toggles
+
+
+
+ Enhance useCalendarEvents hook with filtering and detail management
+ src/hooks/useCalendarEvents.ts
+ Extend the useCalendarEvents hook to:
+1. Handle calendar filtering (show/hide specific calendar events)
+2. Manage event detail view state (which event is currently shown)
+3. Provide methods for toggling calendar visibility
+4. Maintain a list of connected calendars
+5. Provide filtered calendar events based on current filters
+
+Update the hook to accept filter parameters and return appropriate data structures.
+
+ Check that useCalendarEvents.ts properly filters events and manages event details
+ useCalendarEvents hook supports filtering and detail management for calendar events
+
+
+
+
+
+Ensure all calendar event filtering and detail viewing are functioning:
+1. CalendarEventFilter component renders and manages toggles
+2. Calendar events are filtered based on user selections
+3. Event details can be viewed when clicking events
+4. User preferences for filters are remembered between sessions
+
+
+
+- Users can toggle visibility of calendar events from different accounts
+- Calendar event details are accessible in the weekly view
+- Filter settings persist between browser sessions
+- Calendar events are properly integrated with user tasks in the display
+
+
+
\ No newline at end of file
diff --git a/.planning/phases/03-calendar-integration/03-03-PLAN.md b/.planning/phases/03-calendar-integration/03-03-PLAN.md
new file mode 100644
index 0000000..10beb03
--- /dev/null
+++ b/.planning/phases/03-calendar-integration/03-03-PLAN.md
@@ -0,0 +1,156 @@
+---
+phase: 03-calendar-integration
+plan: 03
+type: execute
+wave: 2
+depends_on:
+ - 03-01
+ - 03-02
+files_modified:
+ - src/components/CalendarGrid.tsx
+ - src/types/calendarEvent.ts
+ - src/lib/calendarService.ts
+ - src/components/CalendarEventCard.tsx
+ - src/hooks/useCalendarEvents.ts
+autonomous: true
+must_haves:
+ truths:
+ - "Calendar events are visually distinct from user tasks using different background colors"
+ - "Calendar events styled with a distinct visual style (outlined instead of filled)"
+ - "Calendar events displayed using overlapping indicators that don't block task space"
+ artifacts:
+ - path: "src/components/CalendarGrid.tsx"
+ provides: "Calendar grid with distinct visual styling for calendar events"
+ imports: ["CalendarEventCard"]
+ - path: "src/components/CalendarEventCard.tsx"
+ provides: "Calendar event cards with distinctive UI styling"
+ min_lines: 20
+ - path: "src/types/calendarEvent.ts"
+ provides: "CalendarEvent type with styling properties"
+ exports: ["CalendarEvent"]
+ - path: "src/lib/calendarService.ts"
+ provides: "Updated calendar service with event styling information"
+ exports: ["connectGoogleCalendar", "connectAppleCalendar", "fetchEvents"]
+ - path: "src/hooks/useCalendarEvents.ts"
+ provides: "Enhanced hook managing calendar events with styling data"
+ 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/CalendarEventCard.tsx"
+ to: "src/types/calendarEvent.ts"
+ via: "uses CalendarEvent type for event data"
+ pattern: "CalendarEvent"
+ - from: "src/components/CalendarGrid.tsx"
+ to: "src/hooks/useCalendarEvents.ts"
+ via: "using useCalendarEvents hook to fetch and manage events"
+ pattern: "useCalendarEvents"
+ - from: "src/hooks/useCalendarEvents.ts"
+ to: "src/lib/calendarService.ts"
+ via: "calls calendarService methods"
+ pattern: "calendarService.fetchEvents"
+---
+
+
+Implement visual styling for calendar events to distinguish them from user tasks in the weekly view.
+
+
+
+@~/.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
+- Phase 3 Plans 1 and 2 have implemented calendar integration and filtering
+- Current codebase has CalendarGrid.tsx, CalendarEventCard.tsx, and enhanced data flow
+- Need to apply distinct visual styling to calendar events to meet design requirements
+
+
+
+@.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
+@.planning/phases/03-calendar-integration/03-01-PLAN.md
+@.planning/phases/03-calendar-integration/03-02-PLAN.md
+
+
+
+
+
+ Update CalendarEvent type with styling properties
+ src/types/calendarEvent.ts
+ Enhance the CalendarEvent interface to include styling information:
+1. Add a color property to distinguish calendars visually
+2. Add a styleClass property for Tailwind-based styling (outlined vs filled)
+3. Ensure all existing properties remain intact
+
+Update the interface to:
+- Include "color: string" for calendar identification
+- Include "styleClass: string" for Tailwind utility classes
+
+ Check that src/types/calendarEvent.ts has been updated with styling properties
+ CalendarEvent interface includes styling properties for visual distinction
+
+
+
+ Implement distinct visual styling in CalendarEventCard
+ src/components/CalendarEventCard.tsx
+ Update the CalendarEventCard component to:
+1. Use the color property from the CalendarEvent for background/outline styling
+2. Apply appropriate Tailwind classes based on the styleClass property
+3. Ensure calendar events are visually distinct from user tasks (outlined instead of filled)
+4. Handle all-day events differently from timed events (e.g., horizontal bars vs. blocks)
+
+The styling should:
+- Use the calendar's color for borders or backgrounds
+- Apply outlined styling for calendar events
+- Differentiate all-day events from timed events visually
+
+ Check that CalendarEventCard.tsx applies distinct visual styling based on calendar properties
+ CalendarEventCard component renders with distinctive styling for calendar events
+
+
+
+ Update calendar service to provide styling information
+ src/lib/calendarService.ts
+ Modify the calendar service to:
+1. Assign distinct colors to different calendar accounts
+2. Generate style classes for visual presentation
+3. Ensure styling consistency across all calendar events
+4. Handle cases where calendar colors might not be provided
+
+Update the event fetching to enrich events with:
+- color: string - a unique color for the calendar
+- styleClass: string - Tailwind classes for visual styling
+
+ Check that calendar service properly assigns and returns styling information
+ Calendar service provides distinct visual styling for calendar events
+
+
+
+
+
+Ensure all visual styling is properly applied:
+1. Calendar events have distinct colors and styles
+2. Calendar events are visually distinguished from user tasks
+3. Styling is applied consistently across all calendar events
+4. All-day vs timed events are differentiated visually
+
+
+
+- Calendar events have distinct background colors
+- Calendar events use outlined styling
+- Calendar events do not block task space in the grid
+- Calendar events differentiate between all-day and timed events visually
+
+
+
\ No newline at end of file