Webleb - UI Elements - schedule of events

HTML

CSS

JS

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();
});

schedule of events

Recommended

The Walk of Life

Portofolio

League of legends slider gallery

HTML

CSS

JS

Recommended

The Walk of Life

Portofolio

League of legends slider gallery

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS