{% extends "base/base_FRONT.html.twig" %}

{% block title %}
<a = href = "{{path('base')}}">
<p>Retour</p>
</a>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css" integrity="sha256-5veQuRbWaECuYxwap/IOE/DAwNxgm4ikX7nrgsqYp88=" crossorigin="anonymous">
{% endblock %}
{% block stylesheets %}
    <style>
        #calendrier{
            width: 80%;
            margin: auto;
        }
    </style>
{% endblock %}
{% block textbanner %}
{% block body %}
    <div id="calendrier">
    </div>




<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js" integrity="sha256-XCdgoNaBjzkUaEJiauEq+85q/xi/2D4NcB3ZHwAapoM=" crossorigin="anonymous"></script>
{% block javascripts %}{% endblock %}
<script>
    window.onload = () => {
        let calendarElt = document.querySelector("#calendrier")
        let calendar = new FullCalendar.Calendar(calendarElt, {
            initialView: 'timeGridWeek',
            locale: 'fr',
            headerToolbar: {
                start: 'prev,next today',
                center: 'title',
                end: 'dayGridMonth,timeGridWeek'},
            events: {{ data|raw }},
        })
        calendar.render()
    }
</script>
{% endblock %}
{% endblock %}
{% block all %}



{% endblock %}



{% block ads %}    {% endblock %}