{% 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 %}