diff --git a/event/static/css/calendar.css b/event/static/css/calendar.css index 0426e9d..4215af5 100644 --- a/event/static/css/calendar.css +++ b/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; */ diff --git a/event/static/js/calendar.js b/event/static/js/calendar.js index 4002700..cdd104b 100644 --- a/event/static/js/calendar.js +++ b/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); }