count events per yearmonth in calendar

web/src/components/events/EventContainer.tsx

@@ -265,20 +265,32 @@ const EventCalendar = ({ events }: { events: EventFragment[] }) => {
   return (
     <>
       <div className={styles.eventCalendar}>
-        {Object.keys(eventsByDate).map((yearMonth) => (
+        {Object.keys(eventsByDate).map((yearMonth) => {
-          <div
+          const eventCount = Object.values(eventsByDate[yearMonth]).reduce(
-            key={yearMonth}
+            (yearMonthSum, week) =>
-            className={styles.calendarYearMonth}
+              yearMonthSum +
-            data-collapsed={!visibleYearMonths.includes(yearMonth)}
+              Object.values(week).reduce(
-          >
+                (weekSum, day) => weekSum + day.length,
-            <h2 onClick={() => toggleYearMonth(yearMonth)}>
+                0
-              {formatYearMonth(yearMonth)} <span className={styles.eventCounter}>({Object.keys(eventsByDate[yearMonth]).length})</span>
+              ),
-            </h2>
+            0
-            {Object.keys(eventsByDate[yearMonth]).map((week) => (
+          );
-              <CalendarWeek key={week} days={eventsByDate[yearMonth][week]} />
+          return (
-            ))}
+            <div
-          </div>
+              key={yearMonth}
-        ))}
+              className={styles.calendarYearMonth}
+              data-collapsed={!visibleYearMonths.includes(yearMonth)}
+            >
+              <h2 onClick={() => toggleYearMonth(yearMonth)}>
+                {formatYearMonth(yearMonth)}{" "}
+                <span className={styles.eventCounter}>({eventCount})</span>
+              </h2>
+              {Object.keys(eventsByDate[yearMonth]).map((week) => (
+                <CalendarWeek key={week} days={eventsByDate[yearMonth][week]} />
+              ))}
+            </div>
+          );
+        })}
       </div>
     </>
   );