WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
calendrier des événements
1993
tete
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
19 January 2024
Formulaire de connexion avec validation des entrées
18 June 2025
Portail scolaire : vérification des résultats et paiement des frais de scolarité
6 December 2025
Scène animée SVG avec dégradés et nuages
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(); });