{monthLabel}

\n \n

\n\n

\n {/* Calendar grid */}\n

\n {DAY_HEADERS.map((d) => (\n

{d}

\n ))}\n {cells.map((cell, i) => (\n setSelectedDate(cell.date)}\n >\n

{cell.day}

\n {eventsForDate(cell.date).map((ev, j) => (\n

\n ))}\n

\n\n {/* Category legend */}\n

\n {Object.entries(CATEGORY_COLORS).map(([cat, color]) => (\n

\n {cat}\n

\n ))}\n

\n\n {/* Sidebar: selected date events */}\n

\n {new Date(selectedDate + \"T12:00:00\").toLocaleDateString(\"en-US\", { month: \"short\", day: \"numeric\" })}\n \n

\n\n {selectedEvents.length === 0 ? (\n

\n No events this day\n

\n ) : (\n selectedEvents.map((ev) => (\n

{ev.title}

\n {ev.start_time && {ev.start_time}}\n {ev.start_time && ev.end_time && - {ev.end_time}}\n {\" · \"}\n {ev.category}\n

\n {ev.notes &&

{ev.notes}

}\n

\n \n

\n ))\n )}\n

\n\n {/* Add Event Modal */}\n {showModal && (\n

setShowModal(false)}>\n

e.stopPropagation()}>\n

\n Add Event\n \n

\n Title\n setForm({ ...form, title: e.target.value })} placeholder=\"Event title\" />\n

\n Start Time\n setForm({ ...form, start_time: e.target.value })} />\n

\n End Time\n setForm({ ...form, end_time: e.target.value })} />\n

\n Category\n \n

\n Notes\n