Week View Implementation Summary

Files Created/Modified

Templates

1. templates/week_view.html - Main week view page with view toggle and modal structure
2. templates/partials/week_view_content.html - HTMX partial for the week grid
3. templates/partials/event_detail.html - Modal content for event clicks

Modified

4. templates/index.html - Added view toggle to switch between List and Week views

Styles

5. static/style.css - Added:
   - Dark mode CSS variables
   - Family member color tokens
   - Week view grid layout
   - Responsive breakpoints (desktop, iPad, mobile)
   - Modal styles
   - Navigation buttons
   - Touch-optimized targets

Documentation

6. WEEK_VIEW_API.md - Backend API specification
7. examples/week_view_rendered.html - Example rendered output

Key Features

Week Grid Layout

• 7-day grid (Mon-Sun)
• Today's column highlighted with green border
• Time slots or all-day events supported
• Click any event to open detail modal

Family Member Colors

• Matt: Blue (#3b82f6)
• Aundrea: Pink (#ec4899)
• Sullivan: Green (#22c55e)
• Harper: Amber (#f59e0b)
• Family: Purple (#8b5cf6)
• Multi: Gradient
• Conflicts: Red indicator

Responsive Design

• Desktop (>1024px): Full 7-column grid
• Tablet (641-1024px): 7-column with smaller text
• Mobile (≤640px): Horizontal scroll, 85vw per day

Interactions

• Click event → Open detail modal
• Confirm/Decline/Reschedule buttons in modal
• Week navigation (Previous/Next)
• View toggle (List ↔ Week)
• HTMX for all dynamic updates (no page reload)

Dark Mode

All colors use CSS variables with prefers-color-scheme: dark support.

Backend Requirements

See WEEK_VIEW_API.md for endpoint specifications. Required endpoints:
- GET /week - Week view page
- GET /api/week-view?offset=N - Week content partial
- GET /api/event/{id}/detail - Event detail modal
- POST /api/event/{id}/confirm - Confirm attendance
- POST /api/event/{id}/decline - Decline attendance
- GET /api/event/{id}/reschedule-form - Reschedule form

Acceptance Criteria Status

✅ Week view renders 7 days with events
✅ Events clickable for actions (via modal)
✅ Mobile-responsive (horizontal scroll on mobile)
✅ Dark mode compatible (CSS variables with dark mode)
✅ No page reload needed (HTMX throughout)
✅ Family member color coding
✅ Conflict indicators (red border + ⚡ icon)
✅ Today highlighted (green border)
✅ All-day events supported (📌 prefix)
✅ Touch-optimized (44px min touch targets)