collapse yearmonths that are two months ahead by default in event calendar

web/src/components/events/EventContainer.tsx

@@ -118,7 +118,11 @@ export const EventContainer = ({
     <div className={styles.events}>
       <div className={styles.eventWrapper}>
         <div className={styles.displayOptions}>
-          <button onClick={() => setMode(null)} className="button toggler hasIcon" data-active={mode === "list"}>
+          <button
+            onClick={() => setMode(null)}
+            className="button toggler hasIcon"
+            data-active={mode === "list"}
+          >
             <span>Vis liste</span>
             <Icon type="list" />
           </button>
@@ -194,43 +198,48 @@ const CalendarDay = ({
 );
 
 const EventCalendar = ({ events }: { events: EventFragment[] }) => {
-  const [showAll, setShowAll] = useState(false);
-
   const futureSingularEvents = getSingularEvents(events).filter(
     (x) => x.occurrence?.start && isTodayOrFuture(x.occurrence.start)
   );
   const eventsByDate = organizeEventsInCalendar(futureSingularEvents);
   const yearMonths = Object.keys(eventsByDate);
-  const visibleYearMonths = showAll ? yearMonths : yearMonths.slice(0, 2);
+  const [visibleYearMonths, setVisibleYearMonths] = useState(
+    yearMonths.slice(0, 2)
+  );
+
+  const toggleYearMonth = (yearMonth: string) => {
+    if (visibleYearMonths.includes(yearMonth)) {
+      setVisibleYearMonths(visibleYearMonths.filter((x) => x != yearMonth));
+    } else {
+      setVisibleYearMonths([...visibleYearMonths, yearMonth]);
+    }
+  };
 
   return (
     <>
       <div className={styles.eventCalendar}>
-        {Object.keys(eventsByDate)
+        {Object.keys(eventsByDate).map((yearMonth) => (
-          .filter((yearMonth) => visibleYearMonths.includes(yearMonth))
+          <div
-          .map((yearMonth) => (
+            key={yearMonth}
-            <div key={yearMonth} className={styles.calendarYearMonth}>
+            className={styles.calendarYearMonth}
-              <h2>{formatYearMonth(yearMonth)}</h2>
+            data-collapsed={!visibleYearMonths.includes(yearMonth)}
-              {Object.keys(eventsByDate[yearMonth]).map((week) => (
+            onClick={() => toggleYearMonth(yearMonth)}
-                <div key={week} className={styles.calendarWeek}>
+          >
-                  {Object.keys(eventsByDate[yearMonth][week]).map((day) => (
+            <h2>{formatYearMonth(yearMonth)}</h2>
-                    <CalendarDay
+            {Object.keys(eventsByDate[yearMonth]).map((week) => (
-                      key={day}
+              <div key={week} className={styles.calendarWeek}>
-                      day={day}
+                {Object.keys(eventsByDate[yearMonth][week]).map((day) => (
-                      events={eventsByDate[yearMonth][week][day]}
+                  <CalendarDay
-                    />
+                    key={day}
-                  ))}
+                    day={day}
-                </div>
+                    events={eventsByDate[yearMonth][week][day]}
-              ))}
+                  />
-            </div>
+                ))}
-          ))}
+              </div>
+            ))}
+          </div>
+        ))}
       </div>
-      {!showAll && yearMonths.length > 2 && (
-        <button onClick={() => setShowAll(true)} className="button">
-          <span>Vis alt</span>
-          <Icon />
-        </button>
-      )}
     </>
   );
 };

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

@@ -50,6 +50,10 @@
       text-transform: capitalize;
     }
   }
+
+  &[data-collapsed=true] > .calendarWeek {
+    display: none;
+  }
 }
 
 .calendarWeek {