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

phase	plan	type	wave	depends_on	files_modified	autonomous	must_haves
03-calendar-integration	03	execute	2	03-01 03-02	src/components/CalendarGrid.tsx src/types/calendarEvent.ts src/lib/calendarService.ts src/components/CalendarEventCard.tsx src/hooks/useCalendarEvents.ts	true	truths artifacts key_links 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 path provides imports src/components/CalendarGrid.tsx Calendar grid with distinct visual styling for calendar events CalendarEventCard path provides min_lines src/components/CalendarEventCard.tsx Calendar event cards with distinctive UI styling 20 path provides exports src/types/calendarEvent.ts CalendarEvent type with styling properties CalendarEvent path provides exports src/lib/calendarService.ts Updated calendar service with event styling information connectGoogleCalendar connectAppleCalendar fetchEvents path provides exports src/hooks/useCalendarEvents.ts Enhanced hook managing calendar events with styling data 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/CalendarEventCard.tsx src/types/calendarEvent.ts uses CalendarEvent type for event data CalendarEvent from to via pattern src/components/CalendarGrid.tsx src/hooks/useCalendarEvents.ts using useCalendarEvents hook to fetch and manage events useCalendarEvents from to via pattern src/hooks/useCalendarEvents.ts src/lib/calendarService.ts calls calendarService methods calendarService.fetchEvents

Implement visual styling for calendar events to distinguish them from 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
• 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>

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

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

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