templates/public/events/_calendar.html.twig line 1

  1. <style>
  2. .fc-tooltip {
  3.   position: absolute;
  4.   background: #ffffff;
  5.   border: 1px solid var(--color-border-light);
  6.   padding: 10px 12px;
  7.   border-radius: 8px;
  8.   box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  9.   font-size: 13px;
  10.   z-index: 9999;
  11.   max-width: 240px;
  12. }
  14. .fc-tooltip a {
  15.   display: inline-block;
  16.   margin-top: 6px;
  17.   font-weight: 600;
  18.   text-decoration: none;
  19.   color: var(--color-course-icon);
  20. }
  22. .fc-h-event.fc-event-open,
  23. .fc-event.fc-event-open,
  24. .fc-event-open .fc-event-main {
  25.   background: #198754 !important;
  26.   border-color: #198754 !important;
  27. }
  29. .fc-h-event.fc-event-muted,
  30. .fc-event.fc-event-muted,
  31. .fc-event-muted .fc-event-main {
  32.   background: #dfe3e8 !important;
  33.   border-color: #dfe3e8 !important;
  34.   color: #5f6b7a !important;
  35. }
  37. .fc-daygrid-more-link {
  38.   color: var(--color-primary) !important;
  39.   font-weight: 600;
  40. }
  42. .fc .fc-col-header-cell-cushion {
  43.   display: block;
  44.   padding: 8px 4px;
  45.   white-space: nowrap;
  46.   text-transform: capitalize;
  47.   font-size: 0.92rem;
  48. }
  50. .fc .fc-toolbar-title {
  51.   font-size: 1.2rem;
  52. }
  54. @media (max-width: 768px) {
  55.   .calendar-wrapper {
  56.     padding: 12px 8px;
  57.   }
  59.   .fc .fc-toolbar.fc-header-toolbar {
  60.     gap: 8px;
  61.     margin-bottom: 0.85rem;
  62.   }
  64.   .fc .fc-toolbar-title {
  65.     font-size: 1rem;
  66.   }
  68.   .fc .fc-button {
  69.     padding: 0.34rem 0.58rem;
  70.     font-size: 0.8rem;
  71.   }
  73.   .fc .fc-col-header-cell-cushion {
  74.     padding: 6px 2px;
  75.     font-size: 0.74rem;
  76.     letter-spacing: 0.01em;
  77.   }
  78. }
  80. @media (max-width: 576px) {
  81.   .fc .fc-col-header-cell-cushion {
  82.     padding: 6px 1px;
  83.     font-size: 0.7rem;
  84.   }
  85. }
  86. </style>
  88. <div class="calendar-wrapper">
  89.   <div id="calendar"></div>
  90. </div>
  92. <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
  93. <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/locales-all.global.min.js"></script>
  95. <script>
  96. document.addEventListener('DOMContentLoaded', function () {
  98.   const calendarEl = document.getElementById('calendar');
  99.   let tooltip = null;
  101.   if (!calendarEl) return;
  103.   const mobileBreakpoint = window.matchMedia('(max-width: 576px)');
  104.   const tabletBreakpoint = window.matchMedia('(max-width: 768px)');
  106.   function getResponsiveCalendarOptions() {
  107.     if (mobileBreakpoint.matches) {
  108.       return {
  109.         dayHeaderFormat: { weekday: 'narrow' },
  110.         aspectRatio: 0.78,
  111.         dayMaxEventRows: 1,
  112.       };
  113.     }
  115.     if (tabletBreakpoint.matches) {
  116.       return {
  117.         dayHeaderFormat: { weekday: 'short' },
  118.         aspectRatio: 1.0,
  119.         dayMaxEventRows: 1,
  120.       };
  121.     }
  123.     return {
  124.       dayHeaderFormat: { weekday: 'long' },
  125.       aspectRatio: 1.2,
  126.       dayMaxEventRows: 2,
  127.     };
  128.   }
  130.   const calendar = new FullCalendar.Calendar(calendarEl, {
  131.     initialView: 'dayGridMonth',
  132.     height: 'auto',
  133.     firstDay: 1,
  134.     locale: 'es',
  135.     fixedWeekCount: false,
  136.     dayMaxEvents: true,
  137.     dayMaxEventRows: getResponsiveCalendarOptions().dayMaxEventRows,
  138.     moreLinkText: function (n) {
  139.     return '+' + n + ' más';
  140.     },
  141.     aspectRatio: getResponsiveCalendarOptions().aspectRatio,
  143.     headerToolbar: {
  144.       left: 'prev,next today',
  145.       center: 'title',
  146.       right: ''
  147.     },
  149.     buttonText: {
  150.       today: 'Hoy'
  151.     },
  153.     dayHeaderFormat: getResponsiveCalendarOptions().dayHeaderFormat,
  154.     eventClassNames: function (info) {
  155.       if (info.event.extendedProps.statusKey === 'open') {
  156.         return ['fc-event-open'];
  157.       }
  158.       return ['fc-event-muted'];
  159.     },
  161.     events: [
  162.       {% for e in events %}
  163.       {% set today = "now"|date("Y-m-d") %}
  164.       {% set ini = e.inscripcionesInicio ? e.inscripcionesInicio|date("Y-m-d") : null %}
  165.       {% set fin = e.inscripcionesFin ? e.inscripcionesFin|date("Y-m-d") : null %}
  166.       {% set inscriptionStatus = '' %}
  167.       {% set statusKey = 'open' %}
  168.       {% if ini and fin %}
  169.         {% if today >= ini and today <= fin %}
  170.           {% set inscriptionStatus = 'Inscripciones abiertas' %}
  171.           {% set statusKey = 'open' %}
  172.         {% elseif today < ini %}
  173.           {% set inscriptionStatus = 'Próximamente' %}
  174.           {% set statusKey = 'upcoming' %}
  175.         {% else %}
  176.           {% set inscriptionStatus = 'Inscripciones cerradas' %}
  177.           {% set statusKey = 'closed' %}
  178.         {% endif %}
  179.       {% endif %}
  180.       {
  181.         title: '{{ e.name|e("js") }}',
  182.         start: '{{ e.startDate|date("Y-m-d") }}',
  183.         end: '{{ e.endDate|date("Y-m-d") }}',
  184.         url: '{{ path("events_public_ficha", { extCode: e.extCode }) }}',
  185.         extendedProps: {
  186.           modality: '{{ e.modality ? e.modality.label|e("js") : "" }}',
  187.           inscriptionStatus: '{{ inscriptionStatus|e("js") }}',
  188.           statusKey: '{{ statusKey }}'
  189.         }
  190.       },
  191.       {% endfor %}
  192.     ],
  194.     eventMouseEnter: function (info) {
  195.       const event = info.event;
  197.       tooltip = document.createElement('div');
  198.       tooltip.className = 'fc-tooltip';
  199.       tooltip.innerHTML = `
  200.         <strong>${event.title}</strong><br>
  201.         ${event.extendedProps.modality || ''}<br>
  202.         ${event.extendedProps.inscriptionStatus || ''}
  203.       `;
  205.       document.body.appendChild(tooltip);
  207.       const rect = info.el.getBoundingClientRect();
  208.       tooltip.style.left =
  209.         rect.left + window.scrollX + 'px';
  210.       tooltip.style.top =
  211.         rect.top + window.scrollY - tooltip.offsetHeight - 8 + 'px';
  212.     },
  214.     eventMouseLeave: function () {
  215.       if (tooltip) {
  216.         tooltip.remove();
  217.         tooltip = null;
  218.       }
  219.     }
  220.   });
  222.   function applyResponsiveOptions() {
  223.     const responsiveOptions = getResponsiveCalendarOptions();
  225.     calendar.batchRendering(function () {
  226.       calendar.setOption('dayHeaderFormat', responsiveOptions.dayHeaderFormat);
  227.       calendar.setOption('aspectRatio', responsiveOptions.aspectRatio);
  228.       calendar.setOption('dayMaxEventRows', responsiveOptions.dayMaxEventRows);
  229.     });
  230.   }
  232.   function bindMediaQueryChange(mediaQuery, handler) {
  233.     if (typeof mediaQuery.addEventListener === 'function') {
  234.       mediaQuery.addEventListener('change', handler);
  235.       return;
  236.     }
  238.     if (typeof mediaQuery.addListener === 'function') {
  239.       mediaQuery.addListener(handler);
  240.     }
  241.   }
  243.   bindMediaQueryChange(mobileBreakpoint, applyResponsiveOptions);
  244.   bindMediaQueryChange(tabletBreakpoint, applyResponsiveOptions);
  246.   calendar.render();
  247.   applyResponsiveOptions();
  248. });
  249. </script>