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,17 +660,14 @@ class Event {
 
   // Visibility
 
-  updateVisibility () {
-    // 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()) {
+  hide () {
     this.stopDisplayingDetailsPopupOnClick();
 
     this.node.hide();
-
     this.displayed = false;
   }
-    else {
+
+  show () {
     this.node.show();
 
     this.updateNodeStyle();
@@ -646,6 +677,24 @@ class Event {
 
     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.hide();
+      return;
+    }
+
+    // Otherwise, show the current event
+    this.show();
   }