70 lines
2.3 KiB
HTML
70 lines
2.3 KiB
HTML
{% extends "listing.html" %}
|
|
{% load static %}
|
|
|
|
{% block datacontent %}
|
|
<div class="card mb-0">
|
|
<div class="card-header">
|
|
<div class="row">
|
|
<div class="col-2">
|
|
<h4 class=""> Calendar</h4>
|
|
</div>
|
|
<div class="col-1 ml-auto">
|
|
<div class="text-right">
|
|
<a href="{% url 'event_create' %}">
|
|
<button type="submit" value="add" class="btn btn-icon btn-warning ">
|
|
<i class="tim-icons icon-simple-add"></i>
|
|
</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
{% 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>
|
|
{% endblock %}
|
|
|
|
{% block footerscript %}
|
|
|
|
<script type="text/javascript">
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var calendarEl = document.getElementById('calendar');
|
|
var today = new Date();
|
|
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'
|
|
},
|
|
|
|
// selectable: true,
|
|
// droppable: true,
|
|
rendering: 'background',
|
|
|
|
defaultDate: today,
|
|
// selectable: true,
|
|
// selectHelper: true,
|
|
|
|
initialView: 'dayGridMonth',
|
|
events: [
|
|
{% for event in event_list %}{
|
|
title: '{{ event.name }}',
|
|
start: new Date({{ event.datebegin | date:"Y, n, d, H, i"}}),
|
|
end: new Date({{ event.dateend | date:"Y, n, d, H, i"}}),
|
|
className: 'event-{{ event.color }}'
|
|
},{% endfor %}]
|
|
});
|
|
calendar.render();
|
|
});
|
|
</script>
|
|
{% endblock %} |