WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
schedule of events
1990
tete
Open In Editor
Publish Your Code
Recommended
26 June 2025
Social Links Profile
5 August 2025
The fear of missing
22 June 2025
the enigma of time
HTML
Copy
Eventos que vendran del año
2024
Anterior
Siguiente
CSS
Copy
body { font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; } .container { width: 100%; margin: 20px auto; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); text-align: center; } h1 { margin-bottom: 10px; } table { width: 100%; border-collapse: collapse; margin-bottom: 20px; table-layout: fixed; } th, td { border: 2px solid #ddd; padding: 7px; text-align: center; vertical-align: top; overflow-wrap: break-word; word-break: break-all; } th { background-color: #f2f2f2; } .buttons { display: flex; justify-content: center; gap: 10px; } button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
JS
Copy
document.addEventListener('DOMContentLoaded', () => { const cronograma = document.getElementById('cronograma'); const yearTitle = document.getElementById('year-title'); const prevYearButton = document.getElementById('prev-year'); const nextYearButton = document.getElementById('next-year'); const currentYear = new Date().getFullYear(); let displayedYear = 2024; const months = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']; const countries = ['Colombia', 'El Salvador', 'Guatemala', 'México']; // Eventos que se mostraran en los cuadros del cronograma const events = [ { name: 'Evento 1', date: '2024-01-15', location: 'Bogotá', country: 'Colombia' }, { name: 'Evento 2', date: '2024-02-20', location: 'San Salvador', country: 'El Salvador' }, { name: 'Evento 3', date: '2024-03-10', location: 'Ciudad de Guatemala', country: 'Guatemala' }, { name: 'Evento 4', date: '2024-04-25', location: 'Ciudad de México', country: 'México' }, { name: 'Evento 5', date: '2024-05-14', location: 'Medellín', country: 'Colombia' }, { name: 'Evento 6', date: '2024-06-18', location: 'Santa Ana', country: 'El Salvador' }, { name: 'Evento 7', date: '2024-07-22', location: 'Quetzaltenango', country: 'Guatemala' }, { name: 'Evento 8', date: '2024-08-05', location: 'Guadalajara', country: 'México' }, { name: 'Evento 9', date: '2024-09-10', location: 'Cali', country: 'Colombia' }, { name: 'Evento 10', date: '2024-10-30', location: 'San Miguel', country: 'El Salvador' }, { name: 'Evento 11', date: '2024-11-21', location: 'Escuintla', country: 'Guatemala' }, { name: 'Evento 12', date: '2024-12-05', location: 'Monterrey', country: 'México' }, ]; const fetchEvents = (year) => { // Filtrar eventos para el año especificado return events.filter(event => new Date(event.date).getFullYear() === year); }; const generateTable = (year) => { const yearEvents = fetchEvents(year); cronograma.innerHTML = ''; yearTitle.textContent = year; // Generar fila de encabezado con los meses const headerRow = cronograma.insertRow(); const th = document.createElement('th'); th.textContent = 'Países'; headerRow.appendChild(th); months.forEach(month => { const th = document.createElement('th'); th.textContent = month; headerRow.appendChild(th); }); // Generar filas para cada país countries.forEach(country => { const row = cronograma.insertRow(); const countryCell = row.insertCell(); countryCell.textContent = country; months.forEach((month, index) => { const cell = row.insertCell(); const monthEvents = yearEvents.filter(event => new Date(event.date).getMonth() === index && event.country === country); if (monthEvents.length > 0) { monthEvents.forEach(event => { const eventDiv = document.createElement('div'); eventDiv.textContent = `${event.location} (${event.date})`; eventDiv.addEventListener('click', () => { window.location.href = `/eventos/${year}/${index + 1}`; }); cell.appendChild(eventDiv); }); } else { cell.textContent = ""; } }); }); }; const updateButtons = () => { prevYearButton.disabled = displayedYear <= currentYear; nextYearButton.disabled = displayedYear >= currentYear + 2; }; prevYearButton.addEventListener('click', () => { if (displayedYear > currentYear) { displayedYear--; generateTable(displayedYear); updateButtons(); } }); nextYearButton.addEventListener('click', () => { if (displayedYear < currentYear + 2) { displayedYear++; generateTable(displayedYear); updateButtons(); } }); generateTable(displayedYear); updateButtons(); });