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,15 +193,21 @@ 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) => (
+        {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) => (
@@ -218,5 +224,12 @@ const EventCalendar = ({ events }: { events: EventFragment[] }) => {
             </div>
           ))}
       </div>
+      {!showAll && yearMonths.length > 2 && (
+        <button onClick={() => setShowAll(true)} className="button">
+          <span>Vis alt</span>
+          <Icon />
+        </button>
+      )}
+    </>
   );
 };