templates/agenda/agenda.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Agenda!{% endblock %}
  5. {% block body %}
  6.     {# Affiche le JSON de data #}
  7.     {# {{dump(data)}} #}
  8.     <h1>Calendrier des séances {{ categoryTitle }}</h1>
  10.     <div class="calendaraccueil">
  11.         <img class="imgsite" src="{{ asset('uploads/images/' ~ image['image']) }}" alt="{{ categoryTitle }} Baie de Somme">
  12.         <div class="milieu">
  13.             <p class="milieu">Prix par personne/ 60€</p>
  14.             <p class="milieu">48€ pour les moins de 25 ans</p>
  15.             <p class="milieu">À partir de 11 ans et 1,40 m</p>
  16.         </div>
  17.     </div>
  18.     <p class="milieu">Cliquez sur la séance où vous souhaitez réserver.</p>
  20.     <div id="calendrier" style="display:none;"> </div>
  22.     <style>
  23.         #calendrier {
  24.             min-height: 135em;
  25.         }
  26.         .fc-event-main {
  27.             text-align: left;
  28.         }
  29.     </style>
  30. {% endblock %}
  32. {% block javascripts %}
  33.     {{ parent() }}
  35.     <script>
  36.         document.addEventListener("DOMContentLoaded", function() {
  37.             let calendarElt = document.getElementById('calendrier');
  38.             let calendar;
  39.             let eventsData = {{ data.events|json_encode|raw }};
  40.             let visibleStatus = {{ visible ? 'true' : 'false' }};
  42.             console.log('Initial visibility status:', visibleStatus);
  43.             console.log('Initial events data:', eventsData);
  45.             if (visibleStatus) {
  46.                 calendarElt.style.display = 'block';
  48.                 let mediaQuery = window.matchMedia("(max-width: 1000px)");
  50.                 function updateCalendarDuration() {
  51.                     if (calendar && mediaQuery.matches) {
  52.                         console.log('Switching to 3-day view');
  53.                         calendar.changeView('timeGridThreeDay');
  54.                     } else if (calendar) {
  55.                         console.log('Switching to weekly view');
  56.                         calendar.changeView('timeGridWeek');
  57.                     }
  58.                 }
  60.                 window.onload = () => {
  61.                     // Filter events based on visibility
  62.                     let filteredEvents = eventsData.filter(event => {
  63.                         console.log('Event visibility:', event.visible, 'Title:', event.title);
  64.                         return event.visible;
  65.                     });
  67.                     console.log('Filtered events:', filteredEvents);
  69.                     calendar = new FullCalendar.Calendar(calendarElt, {
  70.                         slotMinTime: '06:00',
  71.                         events: filteredEvents,
  72.                         eventContent: function (arg) {
  73.                             let stockg = arg.event.extendedProps.stock;
  74.                             let visible = arg.event.extendedProps.visible;
  76.                             console.log('Event visibility:', visible);
  78.                             if (stockg === null || stockg === undefined || isNaN(stockg)) {
  79.                                 stockg = 0;
  80.                             }
  82.                             let stock = parseInt(stockg, 10);
  83.                             let stockHtml = '<div class="event-stock">Il reste : ' + stock + ' places</div>';
  84.                             let titleStyle = 'font-weight: bold; text-align:left; font-size: 20px;';
  85.                             return {
  86.                                 html: '<div style="' + titleStyle + '">' + arg.event.title + '</div>' + stockHtml
  87.                             };
  88.                         },
  89.                         initialView: 'timeGridWeek',
  90.                         views: {
  91.                             timeGridWeek: {
  92.                                 type: 'timeGrid',
  93.                                 duration: { days: 7 }
  94.                             },
  95.                             timeGridThreeDay: {
  96.                                 type: 'timeGrid',
  97.                                 duration: { days: 3 }
  98.                             },
  99.                             timeGridOneDay: {
  100.                                 type: 'timeGrid',
  101.                                 duration: { days: 1 }
  102.                             },
  103.                         },
  104.                         locale: 'fr',
  105.                         timeZone: 'Europe/Paris',
  106.                         headerToolbar: {
  107.                             start: 'prev,next today',
  108.                             center: 'title',
  109.                             end: 'dayGridMonth,timeGridWeek,timeGridThreeDay,timeGridOneDay'
  110.                         },
  111.                         buttonText: {
  112.                             today: 'Aujourd\'hui',
  113.                             timeGridOneDay: '1 jour',
  114.                             timeGridThreeDay: '3 jours',
  115.                             timeGridWeek: '7 jours',
  116.                             month: 'Mois',
  117.                         },
  118.                     });
  120.                     calendar.on('eventClick', (e) => {
  121.                         let encodedId = encodeURIComponent(e.event.id);
  122.                         let url = "https://127.0.0.1:8000/activitieshow/" + encodedId;
  123.                         window.location.href = url;
  124.                     });
  126.                     calendar.render();
  127.                     updateCalendarDuration();
  128.                 };
  130.                 mediaQuery.addEventListener('change', () => {
  131.                     updateCalendarDuration();
  132.                 });
  133.             } else {
  134.                 console.error('Calendar element not visible!');
  135.             }
  136.         });
  137.     </script>
  138. {% endblock %}