templates/funcionality/fullcalendar.html.twig line 1

Open in your IDE?
  1. <div id="{{ name|default('full_calendar') }}"></div>
  3. <script>
  4. document.addEventListener('DOMContentLoaded', function () {
  5. if (typeof FullCalendar === 'undefined') {
  6. console.error("Error: FullCalendar no está definido. Verifica que los archivos JS están correctamente cargados.");
  7. return;
  8. }
  10. var calendarEl = document.getElementById('{{ name|default('full_calendar') }}');
  11. var initialDate = null;
  12. {% if positionOnFirstEvent is defined and positionOnFirstEvent and events is not empty %}
  13. var eventsInitialDate = JSON.parse('{{ events|raw }}');
  14. initialDate = eventsInitialDate[0].start;
  15. {% endif %}
  17. if (calendarEl) {
  18. var calendar = new FullCalendar.Calendar(calendarEl, {
  19. initialView: 'dayGridMonth',
  20. locale: 'es',
  21. events: {{ events|raw }},
  22. initialDate: initialDate,
  23. dayCellDidMount: function(info) {
  24. let events = calendar.getEvents().filter(event => event.startStr === info.date.toISOString().split('T')[0]);
  26. let dayNumberEl = info.el.querySelector('.fc-daygrid-day-number');
  28. if (events.length > 0) {
  29. dayNumberEl.classList.add('event-day');
  30. }
  31. }
  32. });
  33. calendar.render();
  34. } else {
  35. console.error("Error: No se encontró el contenedor #full_calendar en el DOM.");
  36. }
  37. });
  38. </script>