Add interactive day selection to calendar

- Added click handlers to calendar days for user interaction
- Implemented selected day state tracking in calendar component
- Added CSS styling for selected days with green highlight
- Selected days show distinct visual feedback with borders and shadows
- Supports combination states (selected+today, selected+events)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-08-28 17:08:58 -04:00
parent 5b0e84121b
commit a3d1612dac
2 changed files with 31 additions and 1 deletions

View File

@@ -311,6 +311,26 @@
background: #e1f5fe;
}
.calendar-day.selected {
background: #e8f5e8;
border: 2px solid #4caf50;
box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
}
.calendar-day.selected.has-events {
background: #f1f8e9;
}
.calendar-day.selected.today {
background: #e0f2f1;
border: 2px solid #4caf50;
}
.calendar-day.selected .day-number {
color: #2e7d32;
font-weight: 700;
}
.day-number {
font-weight: 600;
font-size: 1.1rem;