Display the calendar in full height (w/ scroll).

event/static/css/calendar.css

@@ -30,7 +30,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 100%;
+  height: calc(100% + 30px + 10px);
   padding: 0;
   z-index: 10;
 }
@@ -84,7 +84,7 @@
 #cal-container .cal-event-container {
   display: grid;
   /* grid-template-columns: repeat(24, 1fr); */
-  grid-template-rows: repeat(12, auto);
+  /* grid-template-rows: repeat(12, auto); */
 
   position: absolute;
   top: 40px;
@@ -97,6 +97,7 @@
 
 #cal-container .cal-event {
   position: relative;
+  height: 80px;
   margin: 2px 0;
   /* padding: 5px; */
   /* background-color: #EFEFEF; */

event/static/js/calendar.js

@@ -64,6 +64,7 @@ class Calendar {
     this.updateEventLocationStyleID();
 
     this.sortEventNodesByEndTimeAndLocation();
+    this.updateCalendarNodeHeight();
   }
 
 
@@ -76,6 +77,7 @@ class Calendar {
     this.updateEventContainerGridStyle();
     this.updateTimeSlots();
     this.updateEventVisibilities();
+    this.updateCalendarNodeHeight();
   }
 
   setEndDate (newEndDate) {
@@ -85,6 +87,7 @@ class Calendar {
     this.updateEventContainerGridStyle();
     this.updateTimeSlots();
     this.updateEventVisibilities();
+    this.updateCalendarNodeHeight();
   }
 
   updateHoursToDisplay () {
@@ -93,6 +96,23 @@ class Calendar {
 
     this.nbHoursToDisplay = Math.floor(computeDateDifferenceInHours(this.startDate, this.endDate));
   }
+
+
+  // Calendar container
+
+  updateCalendarNodeHeight () {
+    // Time slot hour row
+    let timeSlotHourRowHeight = $(".cal-time-slot-hour").outerHeight();
+
+    // Event grid
+    let eventContainerHeight = $(".cal-event-container")
+      .css("grid-template-rows")
+      .split("px ")
+      .reduce((heightAccumulator, currentRowHeight) => {
+        return heightAccumulator + parseInt(currentRowHeight);
+      }, 0);
+
+    this.containerNode.css("height", timeSlotHourRowHeight + eventContainerHeight);
   }