77 lines
2.7 KiB
HTML
77 lines
2.7 KiB
HTML
{% 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 = '×';
|
|
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 %}
|