diff --git a/mpicms/templates/events/event_index.html b/mpicms/templates/events/event_index.html
index e10110e..b397492 100644
--- a/mpicms/templates/events/event_index.html
+++ b/mpicms/templates/events/event_index.html
@@ -12,15 +12,18 @@ <h2 class="title is-2">{{ page.title }}</h2>
 
     </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 ],
                 locale: '{{ LANGUAGE_CODE }}',
                 header: {
                     left:   'dayGridMonth,timeGridWeek,timeGridDay',
@@ -33,5 +36,6 @@ <h2 class="title is-2">{{ page.title }}</h2>
         });
 
     </script>
+{% endautoescape %}
 
 {% endblock %}