feat(calendar.html): add calendar template

2026-03-13 13:55:41 +01:00
parent cfd174a233
commit cf5d7f2384
1 changed files with 76 additions and 0 deletions
--- a/kursy/templates/calendar.html
+++ b/kursy/templates/calendar.html
@@ -0,0 +1,76 @@
+{% extends "base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "Course Calendar" %}{% endblock %}
+
+{% block extra_js %}
+<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.20/index.global.min.js" integrity="sha256-sQEgS6I+FEeOlX4oTVi7qW/HMRAh0O6vifpeZXIMRsg=" crossorigin="anonymous"></script>
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    var calendarEl = document.getElementById('calendar');
+    var calendar = new FullCalendar.Calendar(calendarEl, {
+      height: "auto",
+      initialView: 'timeGridWeek',
+      firstDay: 1,
+      nowIndicator: true,
+      views: {
+        timeGridWeek: {
+          titleFormat: { month: 'long', year: 'numeric' },
+          slotLabelFormat: { hour: '2-digit', minute: '2-digit' },
+          slotMinTime: '08:00:00',
+          slotMaxTime: '18:00:00',
+        },
+        listWeek: {
+          titleFormat: { month: 'long', year: 'numeric' },
+          listDaySideFormat: false,
+        },
+      },
+      headerToolbar: {
+        left: 'prev,next today',
+        center: 'title',
+        right: 'timeGridWeek,listMonth',
+      },
+      locale: "{% get_current_language as LANGUAGE_CODE %}{{ LANGUAGE_CODE }}",
+      events: "/api/calendar/events/",
+      eventClick: function(info) {
+        // prevent default navigation
+        info.jsEvent.preventDefault();
+        // show event's URL page in a modal via AJAX
+        const eventUrl = info.event.url;
+        const modal = document.createElement('div');
+        modal.classList.add('fixed', 'inset-0', 'flex', 'items-center', 'justify-center', 'z-50');
+
+        const modalContent = document.createElement('div');
+        modalContent.classList.add('bg-white', 'rounded-lg', 'p-6', 'max-w-lg', 'w-full', 'relative');
+
+         // load event details via AJAX
+        fetch(eventUrl)
+          .then(response => response.text())
+          .then(html => {
+            modalContent.innerHTML = html;
+          })
+          .catch(error => {
+            modalContent.innerHTML = '<p class="text-red-500">Failed to load event details.</p>';
+          });
+
+         modal.appendChild(modalContent);
+        document.body.appendChild(modal);
+
+        const closeButton = document.createElement('button');
+        closeButton.classList.add('absolute', 'top-2', 'right-2', 'text-gray-500', 'hover:text-gray-700', 'focus:outline-none');
+        closeButton.innerHTML = '&times;';
+        closeButton.addEventListener('click', () => {
+          document.body.removeChild(modal);
+        });
+        modalContent.appendChild(closeButton);
+      },
+    });
+    calendar.render();
+  });
+</script>
+{% endblock %}
+
+{% block content %}
+<h2>{% trans "Click a course to see details and sign up." %}</h2>
+<div id="calendar"></div>
+{% endblock %}