--wip-- [skip ci]

kursy/templates/calendar.html

@@ -1,144 +0,0 @@
-{% 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>
-  function showModal(occurrenceId) {
-    // get event's url
-    const eventApiUrl = `/api/calendar/occurrences/${occurrenceId}`;
-
-    const eventApi = fetch(eventApiUrl)
-      .then(response => response.json())
-      .then(data => {
-        eventUrl = `/occurrence/${occurrenceId}/`;
-
-        const modal = document.createElement('div');
-        modal.classList.add('fixed', 'inset-0', 'flex', 'items-center', 'justify-center', 'z-50', 'shadow-lg', 'overflow-auto');
-        modal.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // semi-transparent background
-
-        const modalContent = document.createElement('div');
-        modalContent.classList.add('bg-white', 'rounded-lg', 'p-6', 'max-w-3xl', 'relative', 'overflow-auto', 'max-h-[80vh]');
-        modalContent.innerHTML = '<p class="text-gray-500">{% trans "Loading..." %}</p>';
-
-        if (eventUrl) {
-          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);
-
-          // Close modal when clicking outside modalContent
-          modal.addEventListener('click', function(e) {
-            if (e.target === modal) {
-              document.body.removeChild(modal);
-
-              // remove ?modal=occurrenceId from the url
-              const url = new URL(window.location);
-              url.searchParams.delete('modal');
-              window.history.pushState({}, '', url);
-            }
-          });
-
-          // Close modal on ESC key
-          document.addEventListener('keydown', function escHandler(e) {
-            if (e.key === 'Escape') {
-              if (document.body.contains(modal)) {
-                document.body.removeChild(modal);
-              }
-              document.removeEventListener('keydown', escHandler);
-              // remove ?modal=occurrenceId from the url
-              const url = new URL(window.location);
-              url.searchParams.delete('modal');
-              window.history.pushState({}, '', url);
-            }
-          });
-
-          const closeButton = document.createElement('button');
-          closeButton.classList.add('absolute', 'top-2', 'right-2', 'text-red-500', 'cursor-pointer', 'hover:text-gray-700', 'text-5xl', 'translate-x-[-50%]');
-          closeButton.innerHTML = '&times;';
-          closeButton.addEventListener('click', function() {
-            if (document.body.contains(modal)) {
-              document.body.removeChild(modal);
-            }
-            // remove ?modal=occurrenceId from the url
-            const url = new URL(window.location);
-            url.searchParams.delete('modal');
-            window.history.pushState({}, '', url);
-          });
-          modal.appendChild(closeButton);
-
-          // add ?modal=occurrenceId to the url
-          const url = new URL(window.location);
-          url.searchParams.set('modal', occurrenceId);
-          window.history.pushState({}, '', url);
-        }
-        return data;
-      })
-      .catch(error => {
-        console.error('Error fetching event details:', error);
-        return null;
-      });
-  }
-
-  // if ?modal=event_id is in the url, open the modal for that event
-  const urlParams = new URLSearchParams(window.location.search);
-  const modalEventId = urlParams.get('modal');
-  if (modalEventId) {
-    showModal(modalEventId);
-  }
-
-  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: '22: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/occurrences/",
-      eventClick: function(info) {
-        // prevent default navigation
-        info.jsEvent.preventDefault();
-        const eventUrl = info.event.url;
-        if (eventUrl) {
-          showModal(info.event.id);
-        }
-      },
-    });
-    calendar.render();
-
-  });
-</script>
-{% endblock %}
-
-{% block content %}
-<div class="overflow-auto">
-  <div id="calendar" class="min-w-xl"></div>
-</div>
-{% endblock %}

kursy/templates/header.html

@@ -5,7 +5,7 @@
     <nav class="flex items-center gap-4">
       <a class="text-xl font-bold" href="/">{{ current_site.site_name }}</a>
       <a href="{% slugurl 'courses' %}" class="hover:underline">{% trans "Courses" %}</a>
-      <a href="{% url 'calendar' %}" class="hover:underline">{% trans "Calendar" %}</a>
+      <a href="{% url 'calendar_view' %}" class="hover:underline">{% trans "Calendar" %}</a>
     </nav>
 
     <nav class="flex items-center gap-4">