hide empty calendars

web/src/components/events/EventContainer.tsx

@@ -285,8 +285,17 @@ const EventCalendar = ({ events }: { events: EventFragment[] }) => {
                 {formatYearMonth(yearMonth)}{" "}
                 <span className={styles.eventCounter}>({eventCount})</span>
               </h2>
-              {Object.keys(eventsByDate[yearMonth]).map((week) => (
-                <CalendarWeek key={week} days={eventsByDate[yearMonth][week]} />
+              {eventCount === 0 && (
+                <div className={styles.calendarWeekEmpty}>
+                  Ingen arrangementer denne måneden.
+                </div>
+              )}
+              {eventCount !== 0 &&
+                Object.keys(eventsByDate[yearMonth]).map((week) => (
+                  <CalendarWeek
+                    key={week}
+                    days={eventsByDate[yearMonth][week]}
+                  />
                 ))}
             </div>
           );

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

@@ -75,7 +75,8 @@
   }
 
   &[data-collapsed=true] {
-    > .calendarWeek {
+    > .calendarWeek,
+    > .calendarWeekEmpty {
       display: none;
     }
     h2:before {
@@ -116,6 +117,8 @@
   }
 }
 
+.calendarWeekEmpty {}
+
 .calendarDay {
   min-height: 11rem;
   padding: .4rem;