organize events by months, weeks and days and print a calendar view

web/src/components/events/EventContainer.tsx

@@ -3,19 +3,20 @@
 import { useState } from "react";
 import { EventItem } from "./EventItem";
 import { EventFilter } from "./EventFilter";
-import { EventFragment, getSingularEvents } from "@/lib/event";
 import {
-  toLocalTime,
-  formatDate,
-  commonDateFormat,
-  isTodayOrFuture,
-} from "@/lib/date";
+  EventFragment,
+  getSingularEvents,
+  organizeEventsByDate,
+} from "@/lib/event";
+import { isTodayOrFuture } from "@/lib/date";
 import styles from "./eventContainer.module.scss";
+import { formatDate, formatYearMonth } from "@/lib/date";
+import { getYear, parse } from "date-fns";
 
 type EventContainerMode = "list" | "calendar";
 
 export const EventContainer = ({ events }: { events: EventFragment[] }) => {
-  const [mode, setMode] = useState<EventContainerMode>("calendar");
+  const [mode, setMode] = useState<EventContainerMode>("list");
 
   return (
     <div className={styles.events}>
@@ -43,15 +44,38 @@ const EventList = ({ events }: { events: EventFragment[] }) => {
 };
 
 const EventCalendar = ({ events }: { events: EventFragment[] }) => {
-  const singularEvents = getSingularEvents(events).filter((x) =>
-    x.occurrence?.start && isTodayOrFuture(x.occurrence.start)
+  const futureSingularEvents = getSingularEvents(events).filter(
+    (x) => x.occurrence?.start && isTodayOrFuture(x.occurrence.start)
   );
 
+  const eventsByDate = organizeEventsByDate(futureSingularEvents);
+
   return (
-    <ul className={styles.eventList}>
-      {singularEvents.map((event) => (
-        <EventItem key={event.id} event={event} />
+    <div className={styles.eventList}>
+      {Object.keys(eventsByDate).map((yearMonth) => (
+        <div key={yearMonth} className={styles.calendarYearMonth}>
+          <h2>{formatYearMonth(yearMonth)}</h2>
+          {Object.keys(eventsByDate[yearMonth]).map((week) => (
+            <div key={week} className={styles.calendarWeek}>
+              {Object.keys(eventsByDate[yearMonth][week]).map((day) => (
+                <div key={day} className={styles.calendarDay}>
+                  <h3>
+                    {formatDate(
+                      parse(day, "yyyy-MM-dd", new Date()),
+                      "eeee dd.MM."
+                    )}
+                  </h3>
+                  <ul>
+                    {eventsByDate[yearMonth][week][day].map((event) => (
+                      <EventItem key={event.id} event={event} />
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
       ))}
-    </ul>
+    </div>
   );
 };

web/src/components/events/eventContainer.module.scss

@@ -21,4 +21,19 @@
   button {
     border-radius: 0;
   }
-}
+}
+
+.calendarYearMonth {
+  h2:first-letter {
+    text-transform: capitalize
+  }
+}
+
+.calendarWeek {}
+
+.calendarDay {
+  h3:first-letter {
+    text-transform: capitalize
+  }
+}
+