diff --git a/app/db/models/calendar.server.ts b/app/db/models/calendar.server.ts index 812c7b497..5d29c530e 100644 --- a/app/db/models/calendar.server.ts +++ b/app/db/models/calendar.server.ts @@ -26,7 +26,7 @@ export function findAllBetweenTwoTimestamps({ startTime: Date; endTime: Date; }) { - return findAllBetweenTwoTimestampsStm.all({ + const rows = findAllBetweenTwoTimestampsStm.all({ startTime: dateToDatabaseTimestamp(startTime), endTime: dateToDatabaseTimestamp(endTime), }) as Array< @@ -34,6 +34,14 @@ export function findAllBetweenTwoTimestamps({ Pick & Pick >; + + const eventsSeen = new Map(); + return rows.map((row) => { + const eventsSoFar = (eventsSeen.get(row.eventId) ?? 0) + 1; + eventsSeen.set(row.eventId, eventsSoFar); + + return { ...row, nthAppearance: eventsSoFar > 1 ? eventsSoFar : undefined }; + }); } const findByIdStm = sql.prepare(` diff --git a/app/routes/calendar/index.tsx b/app/routes/calendar/index.tsx index db18fcf59..07d4817a4 100644 --- a/app/routes/calendar/index.tsx +++ b/app/routes/calendar/index.tsx @@ -241,9 +241,6 @@ function EventsList() { const data = useLoaderData(); const { i18n } = useTranslation(); - // xxx: maybe after all show sunday-monday night events on previous week - // xxx: (Day 2,3,4 etc. in title when multiday event) - return (
{filterOutNextWeeksEvents( @@ -288,7 +285,12 @@ function EventsList() {

- {calendarEvent.name} + {calendarEvent.name}{" "} + {calendarEvent.nthAppearance ? ( + + Day {calendarEvent.nthAppearance} + + ) : null}

{calendarEvent.discordUrl || calendarEvent.bracketUrl ? ( diff --git a/app/styles/calendar.css b/app/styles/calendar.css index 96a80c22b..559bcbd5c 100644 --- a/app/styles/calendar.css +++ b/app/styles/calendar.css @@ -128,6 +128,10 @@ margin-block: var(--s-1); } +.calendar__event__day { + color: var(--text-lighter); +} + .calendar__event__bottom-info-container { display: flex; align-items: center;