From 8f30c9e983cbd710f56c2ece6dab6fa982a3a817 Mon Sep 17 00:00:00 2001
From: Jonas Braathen <jonas@ponas.no>
Date: Tue, 6 Aug 2024 01:24:27 +0200
Subject: [PATCH] use empty placeholder cells for weekdays that are not part of
 the shown month

---
 web/src/components/events/EventContainer.tsx | 47 +++++++++++++++-----
 web/src/lib/event.ts                         | 14 +++---
 2 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/web/src/components/events/EventContainer.tsx b/web/src/components/events/EventContainer.tsx
index e71622f..9248dab 100644
--- a/web/src/components/events/EventContainer.tsx
+++ b/web/src/components/events/EventContainer.tsx
@@ -14,7 +14,12 @@ import {
 import { isTodayOrFuture } from "@/lib/date";
 import styles from "./eventContainer.module.scss";
 import { formatDate, formatYearMonth } from "@/lib/date";
-import { parse } from "date-fns";
+import {
+  startOfWeek,
+  endOfWeek,
+  differenceInCalendarDays,
+  parse,
+} from "date-fns";
 import { unique } from "@/lib/common";
 import Icon from "../general/Icon";
 import { useState } from "react";
@@ -178,6 +183,10 @@ const EventList = ({ events }: { events: EventFragment[] }) => {
   );
 };
 
+const EmptyCalendarCell = () => (
+  <div className={`${styles.calendarDay} ${styles.empty}`} />
+);
+
 const CalendarDay = ({
   day,
   events,
@@ -197,6 +206,32 @@ const CalendarDay = ({
   </div>
 );
 
+const CalendarWeek = ({ days }: { days: Record<string, SingularEvent[]> }) => {
+  const daysInWeek = Object.keys(days);
+  const firstDay = daysInWeek[0];
+  const lastDay = daysInWeek[daysInWeek.length - 1];
+
+  const weekStart = startOfWeek(firstDay, { weekStartsOn: 1 });
+  const weekEnd = endOfWeek(lastDay, { weekStartsOn: 1 });
+
+  const emptyCellsBefore = differenceInCalendarDays(firstDay, weekStart);
+  const emptyCellsAfter = differenceInCalendarDays(weekEnd, lastDay);
+
+  return (
+    <div className={styles.calendarWeek}>
+      {[...Array(emptyCellsBefore)].map((_, idx) => (
+        <EmptyCalendarCell key={`before-${idx}`} />
+      ))}
+      {Object.keys(days).map((day) => (
+        <CalendarDay key={day} day={day} events={days[day]} />
+      ))}
+      {[...Array(emptyCellsAfter)].map((_, idx) => (
+        <EmptyCalendarCell key={`after-${idx}`} />
+      ))}
+    </div>
+  );
+};
+
 const EventCalendar = ({ events }: { events: EventFragment[] }) => {
   const futureSingularEvents = getSingularEvents(events).filter(
     (x) => x.occurrence?.start && isTodayOrFuture(x.occurrence.start)
@@ -227,15 +262,7 @@ const EventCalendar = ({ events }: { events: EventFragment[] }) => {
           >
             <h2>{formatYearMonth(yearMonth)}</h2>
             {Object.keys(eventsByDate[yearMonth]).map((week) => (
-              <div key={week} className={styles.calendarWeek}>
-                {Object.keys(eventsByDate[yearMonth][week]).map((day) => (
-                  <CalendarDay
-                    key={day}
-                    day={day}
-                    events={eventsByDate[yearMonth][week][day]}
-                  />
-                ))}
-              </div>
+              <CalendarWeek key={week} days={eventsByDate[yearMonth][week]} />
             ))}
           </div>
         ))}
diff --git a/web/src/lib/event.ts b/web/src/lib/event.ts
index fc160a0..049b4de 100644
--- a/web/src/lib/event.ts
+++ b/web/src/lib/event.ts
@@ -168,20 +168,20 @@ export function organizeEventsInCalendar(
 
   let currentDate = startOfWeek(minDate, { weekStartsOn: 1 });
   while (currentDate <= maxDate) {
-    const yearMonth = formatDate(currentDate, "yyyy-MM");
     const week = formatDate(currentDate, "w");
     const daysOfWeek = eachDayOfInterval({
       start: currentDate,
       end: endOfWeek(currentDate, { weekStartsOn: 1 }),
     });
 
-    if (!calendar[yearMonth]) {
-      calendar[yearMonth] = {};
-    }
-    if (!calendar[yearMonth][week]) {
-      calendar[yearMonth][week] = {};
-    }
     daysOfWeek.forEach((day) => {
+      const yearMonth = formatDate(day, "yyyy-MM");
+      if (!calendar[yearMonth]) {
+        calendar[yearMonth] = {};
+      }
+      if (!calendar[yearMonth][week]) {
+        calendar[yearMonth][week] = {};
+      }
       const formattedDay = formatDate(day, "yyyy-MM-dd");
       if (!calendar[yearMonth][week][formattedDay]) {
         calendar[yearMonth][week][formattedDay] = [];