From da43abfc1b4d3337492ca0bfc7bf8dcb857b8df4 Mon Sep 17 00:00:00 2001
From: Donald Buczek <buczek@molgen.mpg.de>
Date: Tue, 20 Apr 2021 17:02:22 +0200
Subject: [PATCH] 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             |  9 +++++++++
 mpicms/templates/events/event_index.html | 22 +++++++++++++---------
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/mpicms/static/css/custom.css b/mpicms/static/css/custom.css
index 3dadad0..20424a7 100644
--- a/mpicms/static/css/custom.css
+++ b/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;
+}
diff --git a/mpicms/templates/events/event_index.html b/mpicms/templates/events/event_index.html
index 4dc508f..09d2df0 100644
--- a/mpicms/templates/events/event_index.html
+++ b/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();