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