calendar: Toggle external events only

- always show internal events
- let a single button toggle external events on and off
- toggle button label with state
- use css to add :hover feedback to the button

mpicms/static/css/custom.css

@@ -761,3 +761,12 @@ div.codehilite:not(:last-child) {
     width: 100%;
     height: 100%;
 }
+
+#switch_external {
+    color: black;
+    background-color: silver;
+}
+
+#switch_external:hover {
+    background-color: lightgray;
+}

mpicms/templates/events/event_index.html

@@ -15,8 +15,7 @@ <h2 class="title is-2">{{ page.title }}</h2>
             <div class="fc-center">
             </div>
             <div class="fc-right">
-                <a id="switch_external" class="button" style="background-color: silver;  color: black">external events</a>
-                <a id="switch_internal" class="button" style="background-color: #006c66; color: white">events @MPIMG</a>
+                <a id="switch_external" class="button">hide external events</a>
             </div>
         </div>
     </div>
@@ -32,7 +31,7 @@ <h2 class="title is-2">{{ page.title }}</h2>
 
             var calendar = new FullCalendar.Calendar(calendarEl, {
                 plugins: [ 'dayGrid', 'timeGrid' ],
-                eventSources: [ event_source_internal ],
+                eventSources: [ event_source_internal , event_source_external ],
                 locale: '{{ LANGUAGE_CODE }}',
                 header: {
                     left:   'dayGridMonth,timeGridWeek,timeGridDay',
@@ -41,13 +40,18 @@ <h2 class="title is-2">{{ page.title }}</h2>
                 }
             });
 
+            var externalEventsShown = 1
+
             document.getElementById('switch_external').addEventListener("click", function() {
-                calendar.getEventSources()[0].remove()
-                calendar.addEventSource(event_source_external)
-            });
-            document.getElementById('switch_internal').addEventListener("click", function() {
-                calendar.getEventSources()[0].remove()
-                calendar.addEventSource(event_source_internal)
+                if (externalEventsShown) {
+                    calendar.getEventSources()[1].remove()
+                    externalEventsShown = 0
+                    this.innerHTML="show external events"
+                } else {
+                    calendar.addEventSource(event_source_external)
+                    externalEventsShown = 1
+                    this.innerHTML="hide external events"
+                }
             });
 
             calendar.render();