event_index: Use event sources

Retrive internal and external separately and use them as event sources for FullCalendar. Provide button to switch of and back on the "external" event source.
molgen · Apr 21, 2021 · f7b03b7 · f7b03b7
1 parent 9141129
commit f7b03b7
Showing 2 changed files with 39 additions and 4 deletions.
diff --git 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
@@ -8,19 +8,30 @@ <h2 class="title is-2">{{ page.title }}</h2>
 
         <div id="calendar"></div>
         <br>
-        <a href="https://it.molgen.mpg.de/cgi-bin/ics/subscription?cal=molgen&subscribe=1" class="button cal-button">{% trans 'Subscribe' %}</a>
-
+        <div class="fc-toolbar">
+            <div class="fc-left">
+                <a href="https://it.molgen.mpg.de/cgi-bin/ics/subscription?cal=molgen&subscribe=1" class="button cal-button">{% trans 'Subscribe' %}</a>
+            </div>
+            <div class="fc-center">
+            </div>
+            <div class="fc-right">
+                <a id="switch_external" class="button">hide external events</a>
+            </div>
+        </div>
     </div>
 
-    {% get_json_events page as events %}
+{% autoescape off %}
     <script>
 
+        var event_source_internal = { events: {% get_json_events page %}, color: '#006c66' };
+        var event_source_external = { events: {% get_json_events page True %}, color: 'silver', textColor: 'black' };
+
         document.addEventListener('DOMContentLoaded', function() {
             var calendarEl = document.getElementById('calendar');
 
             var calendar = new FullCalendar.Calendar(calendarEl, {
                 plugins: [ 'dayGrid', 'timeGrid' ],
-                events: {{ events|safe }},
+                eventSources: [ event_source_internal , event_source_external ],
                 locale: '{{ LANGUAGE_CODE }}',
                 header: {
                     left:   'dayGridMonth,timeGridWeek,timeGridDay',
@@ -29,9 +40,24 @@ <h2 class="title is-2">{{ page.title }}</h2>
                 }
             });
 
+            var externalEventsShown = 1
+
+            document.getElementById('switch_external').addEventListener("click", function() {
+                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();
         });
 
     </script>
+{% endautoescape %}
 
 {% endblock %}