52 lines
1.8 KiB
HTML
52 lines
1.8 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="col-md-10 ml-auto mr-auto">
|
|
<div class="card card-calendar">
|
|
<div class="card-body">
|
|
{% if event_list %}
|
|
<div id='calendar' class="fc fc-ltr fc-unthemed"></div>
|
|
{% else %}
|
|
<p class="muted-text">There are no events corresponding to your criterias.</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block footerscript %}
|
|
<script type="text/javascript">
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var calendarEl = document.getElementById('calendar');
|
|
var calendar = new FullCalendar.Calendar(calendarEl, {
|
|
// plugins: ['interaction', 'dayGrid'],
|
|
// editable: true,
|
|
// themeSystem: 'bootstrap',
|
|
headerToolbar: {
|
|
left: 'dayGridMonth,dayGridWeek,dayGridDay,listYear',
|
|
center: 'title',
|
|
right: 'prevYear,prev,today,next,nextYear'
|
|
},
|
|
|
|
// droppable: true,
|
|
// rendering: 'background',
|
|
firstDay: 1,
|
|
selectable: true,
|
|
// selectHelper: true,
|
|
|
|
initialView: 'dayGridMonth',
|
|
events: [
|
|
{% for event in event_list %}{
|
|
title: '{{ event.name }}',
|
|
start: new Date({{ event.date_begin | date:"Y"}}, {{ event.date_begin | date:"n"}} - 1, {{ event.date_begin | date:"d, H, i"}}),
|
|
end: new Date({{ event.date_end | date:"Y"}}, {{ event.date_end | date:"n"}} - 1, {{ event.date_end | date:"d, H, i"}}),
|
|
className: 'event-{{ event.color }}'
|
|
},{% endfor %}]
|
|
});
|
|
calendar.render();
|
|
});
|
|
</script>
|
|
{% endblock %} |