https://billboard.com.co/wp-content/plugins/event-calendar-plugin/assets/calendar-init.js

1document.addEventListener("DOMContentLoaded", function () {
2  const ecTarget = document.getElementById("ec");
3  const cityFilter = document.getElementById("ec-city-filter");
4
5  // Salir si no se encuentra el contenedor
6  if (!ecTarget) {
7    console.log(
8      "Error: El contenedor del calendario (#ec) no se encontró en la página."
9    );
10    if (cityFilter) cityFilter.style.display = "none";
11    return;
12  }
13
14  const allEvents = [...EC_EVENTS];
15  let currentFilterCity = "all";
16
17  // 1. Llenar el filtro de ciudades
18  if (cityFilter) {
19    const allPossibleCities = [
20      "Armenia",
21      "Barranquilla",
22      "Bogotá",
23      "Bucaramanga",
24      "Cali",
25      "Cartagena",
26      "Ibagué",
27      "Manizales",
28      "Medellín",
29      "Neiva",
30      "Pasto",
31      "Pereira",
32      "Santa Marta",
33      "Santander de Quilichao",
34      "Villavicencio",
35    ];
36
37    const allOption = document.createElement("option");
38    allOption.value = "all";
39    allOption.textContent = "Todas las ciudades";
40    cityFilter.appendChild(allOption);
41
42    allPossibleCities.forEach((city) => {
43      const option = document.createElement("option");
44      option.value = city;
45      option.textContent = city;
46      cityFilter.appendChild(option);
47    });
48  }
49
50  // 2. Crear la instancia del calendario
51  const calendar = EventCalendar.create(ecTarget, {
52    view: "dayGridMonth",
53    firstDay: 0,
54    events: allEvents,
55    locale: "es",
56    date: new Date(),
57    editable: false,
58    eventStartEditable: false,
59    eventDurationEditable: false,
60
61    // Cambiar el idioma de los botones
62    buttonText: {
63      today: "Hoy",
64      dayGridMonth: "Mes",
65      listMonth: "Listado",
66    },
67
68    //Colores
69    eventClassNames: function (info) {
70      const city = (info.event.extendedProps.city || "").toLowerCase();
71
72      if (!city) return [];
73
74      // Convertir a slug: quitar tildes, reemplazar espacios por guiones
75      const slug = city
76        .normalize("NFD")
77        .replace(/[\u0300-\u036f]/g, "") // quita acentos
78        .replace(/\s+/g, "-") // espacios → guiones
79        .replace(/[^a-z0-9-]/g, ""); // limpia caracteres raros
80
81      return [`city-${slug}`];
82    },
83
84    // Traducción del mensaje cuando no hay eventos
85    noEventsContent: "No hay eventos para mostrar",
86
87    // Configuración del encabezado del calendario
88    headerToolbar: {
89      start: "prev,next today",
90      center: "title",
91      end: "dayGridMonth listMonth",
92    },
93
94    // imagen del evento en minuatura
95    eventContent: function (info) {
96      const event = info.event;
97      const imageUrl = event.extendedProps.image;
98      const viewType = info.view.type; //
99
100      const container = document.createElement("div");
101
102      if (imageUrl) {
103        const img = document.createElement("img");
104        img.src = imageUrl;
105        img.alt = event.title;
106
107        // Estilo diferente según la vista
108        if (viewType.startsWith("list")) {
109          img.style.width = "60px";
110          img.style.height = "60px";
111          img.style.objectFit = "cover";
112          img.style.float = "left";
113          img.style.marginRight = "10px";
114        } else {
115          img.style.width = "100%";
116          img.style.borderRadius = "6px";
117          img.style.marginBottom = "4px";
118        }
119
120        container.appendChild(img);
121      }
122
123      const title = document.createElement("div");
124      title.textContent = event.title;
125      title.style.fontSize = "0.9em";
126      title.style.fontWeight = "bold";
127
128      // Si estamos en vista lista, alinear verticalmente
129      if (viewType.startsWith("list")) {
130        title.style.lineHeight = "60px";
131      }
132
133      container.appendChild(title);
134
135      return { domNodes: [container] };
136    },
137
138    // Filtro de eventos por ciudad
139    eventFilter: function (info) {
140      if (currentFilterCity === "all") return true;
141
142      const eventCity = info.event.extendedProps.city || "";
143      const filterCity = currentFilterCity;
144
145      return eventCity === filterCity;
146    },
147
148    // Manejar clic en el evento
149    eventClick: function (info) {
150      info.jsEvent.preventDefault();
151      const url = info.event.extendedProps.url;
152
153      if (!url) {
154        alert("Este evento no tiene una URL definida.");
155        return;
156      }
157
158      window.location.href = url;
159    },
160  });
161
162  // 3. Agregar el evento para filtrar
163  if (cityFilter) {
164    cityFilter.addEventListener("change", function () {
165      currentFilterCity = this.value;
166      calendar.setOption("events", allEvents);
167    });

168  }
169});