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

<objective>
Implement visual styling for calendar events to distinguish them from 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
- 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
</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
@.planning/phases/03-calendar-integration/03-01-PLAN.md
@.planning/phases/03-calendar-integration/03-02-PLAN.md
</context>

<tasks>

<task type="auto">
  <name>Update CalendarEvent type with styling properties</name>
  <files>src/types/calendarEvent.ts</files>
  <action>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
</action>
  <verify>Check that src/types/calendarEvent.ts has been updated with styling properties</verify>
  <done>CalendarEvent interface includes styling properties for visual distinction</done>
</task>

<task type="auto">
  <name>Implement distinct visual styling in CalendarEventCard</name>
  <files>src/components/CalendarEventCard.tsx</files>
  <action>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
</action>
  <verify>Check that CalendarEventCard.tsx applies distinct visual styling based on calendar properties</verify>
  <done>CalendarEventCard component renders with distinctive styling for calendar events</done>
</task>

<task type="auto">
  <name>Update calendar service to provide styling information</name>
  <files>src/lib/calendarService.ts</files>
  <action>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
</action>
  <verify>Check that calendar service properly assigns and returns styling information</verify>
  <done>Calendar service provides distinct visual styling for calendar events</done>
</task>

</tasks>

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

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

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