{% extends 'menuback.html.twig' %}
{% block stylesheets %} 
   {{parent()}}
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.0/main.min.css" integrity="sha256-uq9PNlMzB+1h01Ij9cx7zeE2OR2pLAfRw3uUUOOPKdA=" crossorigin="anonymous">

  <style>
        #calendrier{
            width: 100%;
            margin: auto;
        }
    </style>
  
 {% endblock %}

{% block body %}
    <div class="main-content" style="background-color:white;">
        <section class="section">
          <div class="section-body">
            <div class="row">
              <div class="col-12" >
                  <div id="calendrier">
    </div>
              </div>
            </div>
          </div>
        </section>
     
      </div>
{% endblock %}
{% block javascripts %} 
   {{parent()}}
  <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.0/main.min.js" integrity="sha256-DBxkGZLxKsLKhz054qUpBqtotG00r9AELGpSigJujLg=" crossorigin="anonymous"></script>

 <script>
    window.onload = () => {
        let calendarElt = document.querySelector("#calendrier")

        let calendar = new FullCalendar.Calendar(calendarElt, {
            initialView: 'timeGridWeek',
            locale: 'fr',
            timeZone: 'Europe/Paris',
            headerToolbar: {
                start: 'prev,next today',
                center: 'title',
                end: 'dayGridMonth,timeGridWeek'
            },
            events: {{ data|raw }},
            editable: true,
            eventResizableFromStart: true
        })

        calendar.on('eventChange', (e) => {
            let url = `/upd/${e.event.id}/edit`
            let donnees = {
                "title": e.event.title,
                "description": e.event.extendedProps.description,
                "start": e.event.start,
                "end": e.event.end,
                "backgroundColor": e.event.backgroundColor,
                "borderColor": e.event.borderColor,
                "textColor": e.event.textColor,
                "allDay": e.event.allDay
            }
            
            let xhr = new XMLHttpRequest

            xhr.open("PUT", url)
            xhr.send(JSON.stringify(donnees))
        })

        calendar.render()
    }
</script>

 
 {% endblock %}