Month view loses course colors and day cells grow very tall #61

New issue

Open

opened 2026-10-03 19:44:42 +00:00 by jalenluorion · 0 comments

jalenluorion commented

2026-10-03 19:44:42 +00:00

Member

What's wrong
In Month view every event is the same default blue instead of its course color, and nothing limits how many events a day shows, so a busy day cell grows to roughly 1,800px tall.

How to reproduce

Sign in with a schedule that has a few courses and open Home.
Note the event colors in Week view, then click "month".
Every event is blue, and the weekday rows are very tall.

Expected
Month view uses the same colors as Week view and the sidebar dots. Each day shows a few events plus a "+N more" link.

Where to look

web/src/app/components/Calendar.tsx: <FullCalendar> has no dayMaxEvents; add one (for example dayMaxEvents={3} or true).
web/src/app/components/FullCalendarCard.tsx: the custom eventContent. In month view, timed events use FullCalendar's "dot" display; custom content drops the colored dot, and FullCalendar sets no inline color on dot events.
web/src/styles/calendar.css: .fc-event { background-color: var(--fc-event-bg-color, ...) } then paints them with FullCalendar's default blue.
web/src/app/page.tsx: where each course's backgroundColor and borderColor are set.
Possible fixes: eventDisplay: "block" for dayGridMonth through the views prop, or color the card from event.backgroundColor in FullCalendarCard.

Done when

Month view events use the same colors as Week view.
Busy days are capped and "+N more" shows the rest.
Week and Day views look unchanged in light and dark mode.

**What's wrong** In Month view every event is the same default blue instead of its course color, and nothing limits how many events a day shows, so a busy day cell grows to roughly 1,800px tall. **How to reproduce** 1. Sign in with a schedule that has a few courses and open Home. 2. Note the event colors in Week view, then click "month". 3. Every event is blue, and the weekday rows are very tall. **Expected** Month view uses the same colors as Week view and the sidebar dots. Each day shows a few events plus a "+N more" link. **Where to look** - `web/src/app/components/Calendar.tsx`: `<FullCalendar>` has no `dayMaxEvents`; add one (for example `dayMaxEvents={3}` or `true`). - `web/src/app/components/FullCalendarCard.tsx`: the custom `eventContent`. In month view, timed events use FullCalendar's "dot" display; custom content drops the colored dot, and FullCalendar sets no inline color on dot events. - `web/src/styles/calendar.css`: `.fc-event { background-color: var(--fc-event-bg-color, ...) }` then paints them with FullCalendar's default blue. - `web/src/app/page.tsx`: where each course's `backgroundColor` and `borderColor` are set. - Possible fixes: `eventDisplay: "block"` for `dayGridMonth` through the `views` prop, or color the card from `event.backgroundColor` in FullCalendarCard. **Done when** - [ ] Month view events use the same colors as Week view. - [ ] Busy days are capped and "+N more" shows the rest. - [ ] Week and Day views look unchanged in light and dark mode.

jalenluorion added this to the Phase 2 milestone

2026-10-03 19:44:42 +00:00

jalenluorion added the

intermediate

bug

frontend

labels

2026-10-03 19:44:42 +00:00

jalenluorion added this to the CMUCal project

2026-10-03 19:45:09 +00:00