don't show more than two months in event calendar by default

web/src/components/events/EventContainer.tsx

@@ -44,10 +44,10 @@ export const EventContainer = ({
   const [venue, setVenue] = useQueryState("venue", parseAsString);
 
   const resetFilters = () => {
-    setCategory(null)
-    setOrganizer(null)
-    setVenue(null)
-  }
+    setCategory(null);
+    setOrganizer(null);
+    setVenue(null);
+  };
 
   /* Allow filtering on all categories that are configured to be shown */
   const filterableCategories = eventCategories.filter((x) => x.showInFilters);
@@ -193,30 +193,43 @@ 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);
 
   return (
-    <div className={styles.eventCalendar}>
-      {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) => (
-                <CalendarDay
-                  key={day}
-                  day={day}
-                  events={eventsByDate[yearMonth][week][day]}
-                />
+    <>
+      <div className={styles.eventCalendar}>
+        {Object.keys(eventsByDate)
+          .filter((yearMonth) => visibleYearMonths.includes(yearMonth))
+          .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) => (
+                    <CalendarDay
+                      key={day}
+                      day={day}
+                      events={eventsByDate[yearMonth][week][day]}
+                    />
+                  ))}
+                </div>
               ))}
             </div>
           ))}
-        </div>
-      ))}
-    </div>
+      </div>
+      {!showAll && yearMonths.length > 2 && (
+        <button onClick={() => setShowAll(true)} className="button">
+          <span>Vis alt</span>
+          <Icon />
+        </button>
+      )}
+    </>
   );
 };