Calendar event list Day nth text

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<CalendarEventDate, "id" | "eventId" | "startTime"> &
       Pick<User, "discordName" | "discordDiscriminator">
   >;
+
+  const eventsSeen = new Map<CalendarEventDate["eventId"], number>();
+  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(`

app/routes/calendar/index.tsx

@@ -241,9 +241,6 @@ function EventsList() {
   const data = useLoaderData<typeof loader>();
   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 (
     <div className="calendar__events-container">
       {filterOutNextWeeksEvents(
@@ -288,7 +285,12 @@ function EventsList() {
                     </div>
                     <Link to={String(calendarEvent.eventId)}>
                       <h2 className="calendar__event__title">
-                        {calendarEvent.name}
+                        {calendarEvent.name}{" "}
+                        {calendarEvent.nthAppearance ? (
+                          <span className="calendar__event__day">
+                            Day {calendarEvent.nthAppearance}
+                          </span>
+                        ) : null}
                       </h2>
                     </Link>
                     {calendarEvent.discordUrl || calendarEvent.bracketUrl ? (

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;