Allow to only display events the user subscribed to.

event/static/js/calendar.js

@@ -33,6 +33,10 @@ class Calendar {
 
     this.events = [];
 
+    this.onlyDisplaySubscribedEvents = calendarParameters.onlyDisplaySubscribedEvents !== undefined
+                              ? calendarParameters.onlyDisplaySubscribedEvents
+                              : false;
+
     this.eventDetailURLFormat = calendarParameters.eventDetailURLFormat !== undefined
                               ? calendarParameters.eventDetailURLFormat
                               : "";
@@ -81,6 +85,7 @@ class Calendar {
     this.updateHoursToDisplay();
     this.updateEventContainerGridStyle();
     this.updateTimeSlots();
+
     this.updateEventVisibilities();
     this.updateCalendarNodeHeight();
 
@@ -93,6 +98,7 @@ class Calendar {
     this.updateHoursToDisplay();
     this.updateEventContainerGridStyle();
     this.updateTimeSlots();
+
     this.updateEventVisibilities();
     this.updateCalendarNodeHeight();
 
@@ -114,7 +120,9 @@ class Calendar {
     let timeSlotHourRowHeight = $(".cal-time-slot-hour").outerHeight();
 
     // Event grid
-    let eventContainerHeight = $(".cal-event-container")
+    this.containerNode.css("height", "calc(100% )");
+
+    let eventContainerHeight = this.eventContainerNode
       .css("grid-template-rows")
       .split("px ")
       .reduce((heightAccumulator, currentRowHeight) => {
@@ -355,6 +363,32 @@ class Calendar {
       background: "#000"
     });
   }
+
+
+  // Event filtering
+
+  showEventsNotSubscribedByUser () {
+    this.onlyDisplaySubscribedEvents = false;
+
+    this.updateEventVisibilities();
+    this.updateCalendarNodeHeight();
+  }
+
+  hideEventsNotSubscribedByUser () {
+    this.onlyDisplaySubscribedEvents = true;
+
+    this.updateEventVisibilities();
+    this.updateCalendarNodeHeight();
+  }
+
+  toggleEventsNotSubscribedByUser () {
+    if (this.onlyDisplaySubscribedEvents) {
+      this.showEventsNotSubscribedByUser();
+    }
+    else {
+      this.hideEventsNotSubscribedByUser();
+    }
+  }
 }
 
 
@@ -626,26 +660,41 @@ class Event {
 
   // Visibility
 
+  hide () {
+    this.stopDisplayingDetailsPopupOnClick();
+
+    this.node.hide();
+    this.displayed = false;
+  }
+
+  show () {
+    this.node.show();
+
+    this.updateNodeStyle();
+    this.updatePositionInGrid();
+    this.updateOverflowTooltipTriggering();
+    this.startDisplayingDetailsPopupOnClick();
+
+    this.displayed = true;
+  }
+
   updateVisibility () {
+    // If required, hide events which are not subscribed by the current user
+    if (this.calendar.onlyDisplaySubscribedEvents
+    &&  ! this.subscribedByUser) {
+      this.hide();
+      return;
+    }
+
     // Hide events which cannot apear in the calendar time span
     if (this.calendar.startDate.getTime() >= this.endDate.getTime()
     ||  this.calendar.endDate.getTime()   <= this.startDate.getTime()) {
-      this.stopDisplayingDetailsPopupOnClick();
+      this.hide();
-
+      return;
-      this.node.hide();
-
-      this.displayed = false;
     }
-    else {
-      this.node.show();
 
-      this.updateNodeStyle();
+    // Otherwise, show the current event
-      this.updatePositionInGrid();
+    this.show();
-      this.updateOverflowTooltipTriggering();
-      this.startDisplayingDetailsPopupOnClick();
-
-      this.displayed = true;
-    }
   }