Add calendar view for slots to AK detail page

AKPlan/templates/AKPlan/plan_akslot.html

+{% load static %}
+{% load tz %}
+{% load i18n %}
+{% get_current_language as LANGUAGE_CODE %}
+
+<link href='{% static 'AKPlan/fullcalendar/core/main.min.css' %}' rel='stylesheet' />
+<link href='{% static 'AKPlan/fullcalendar/daygrid/main.min.css' %}' rel='stylesheet' />
+<link href='{% static 'AKPlan/fullcalendar/timegrid/main.min.css' %}' rel='stylesheet' />
+
+<script src='{% static 'AKPlan/fullcalendar/core/main.min.js' %}'></script>
+{% with 'AKPlan/fullcalendar/core/locales/'|add:LANGUAGE_CODE|add:'.js' as locale_file %}
+<script src="{% static locale_file %}"></script>
+{% endwith %}
+<script src='{% static 'AKPlan/fullcalendar/daygrid/main.min.js' %}'></script>
+<script src='{% static 'AKPlan/fullcalendar/timegrid/main.min.js' %}'></script>
+<script src='{% static 'AKPlan/fullcalendar/bootstrap/main.min.js' %}'></script>
+
+<script>
+
+document.addEventListener('DOMContentLoaded', function() {
+    var calendarEl = document.getElementById('akSlotCalendar');
+
+    var calendar = new FullCalendar.Calendar(calendarEl, {
+        plugins: [ 'timeGrid', 'bootstrap' ],
+        // Adapt to timezone of the connected event
+        timeZone: '{{ ak.event.timezone }}',
+        defaultView: 'timeGrid',
+        // Adapt to user selected loclae
+        locale: '{{ LANGUAGE_CODE }}',
+        // No header, not buttons
+        header: {
+            left: '',
+            center: '',
+            right: ''
+        },
+        aspectRatio: 2.5,
+        themeSystem: 'bootstrap',
+        // Only show calendar view for the dates of the connected event
+        visibleRange: {
+            start: '{{ ak.event.start | timezone:ak.event.timezone | date:"Y-m-d H:i:s" }}',
+            end: '{{ ak.event.end | timezone:ak.event.timezone  | date:"Y-m-d H:i:s"}}',
+        },
+        allDaySlot: false,
+        nowIndicator: true,
+        eventTextColor: '#fff',
+        eventColor: '#127ba3',
+        // Create entries for all scheduled slots
+        events: [
+            {% for slot in ak.akslot_set.all %}
+                {% if slot.start %}
+                    {'title': '{{ slot.room }}',
+                    'start': '{{ slot.start | timezone:ak.event.timezone | date:"Y-m-d H:i:s" }}',
+                    'end': '{{ slot.end | timezone:ak.event.timezone | date:"Y-m-d H:i:s" }}'},
+                {% endif %}
+            {% endfor %}
+        ]
+    });
+
+    calendar.render();
+});
+
+</script>

AKSubmission/templates/AKSubmission/ak_detail.html

@@ -4,6 +4,8 @@
 {% load fontawesome %}
 
 {% load tags_AKSubmission %}
+{% load tags_AKModel %}
+
 
 {% block title %}{% trans "AKs" %}: {{ ak.event.name }} - {% trans "AK" %}: {{ ak.name }}{% endblock %}
 
@@ -14,6 +16,12 @@
     <li class="breadcrumb-item active">{{ ak.name }}</li>
 {% endblock %}
 
+{% if 'AKPlan'|check_app_installed %}
+    {% block imports %}
+        {% include "AKPlan/plan_akslot.html" %}
+    {% endblock %}
+{% endif %}
+
 {% block content %}
     {% include "AKSubmission/messages.html" %}
 
@@ -60,6 +68,10 @@
     <p style="margin-top: 30px;margin-bottom: 30px;">{{ ak.description }}</p>
 
 
+    {% if 'AKPlan'|check_app_installed %}
+        <div id='akSlotCalendar' style="margin-bottom: 50px;"></div>
+    {% endif %}
+
 
     <table class="table">
         <thead>