viewof calendario = { const container = document.createElement("div"); container.className = "calendar-container"; const locale = d3.timeFormatLocale({ decimal: ",", thousands: ".", grouping: [3], currency: ["", "€"], dateTime: "%A, %e de %B de %Y, %X", date: "%d/%m/%Y", time: "%H:%M:%S", periods: ["AM", "PM"], days: ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"], shortDays: ["do", "lu", "ma", "mi", "ju", "vi", "sá"], months: ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"], shortMonths: ["ene", "feb", "mar", "abr", "may", "jun", "jul", "ago", "sep", "oct", "nov", "dic"] }); const formatMonthYear = locale.format("%B %Y"); let currentDate = new Date(); let selectedDate = new Date(); let filterByDay = false; let selectedRango = "todos"; let aniversario = null; function renderCalendar() { const year = currentDate.getFullYear(); const month = currentDate.getMonth(); const firstDay = new Date(year, month, 1); const lastDay = new Date(year, month + 1, 0); const startDay = firstDay.getDay() || 7; const daysInMonth = lastDay.getDate(); if (!procesados) { container.innerHTML = "

Cargando datos del calendario...

"; return; } const rangosUnicos = [...new Set(procesados.map(d => d.texto1))].sort(); const prevAniversarioValue = container.querySelector("#aniversario-input")?.value || ""; container.innerHTML = `

${formatMonthYear(currentDate)}

Día Mes

${Array.from({ length: startDay - 1 }, () => '

').join("")} ${Array.from({ length: daysInMonth }, (_, i) => { const day = i + 1; const date = new Date(year, month, day); const isToday = date.toDateString() === new Date().toDateString(); const isSelected = filterByDay ? true : selectedDate && date.toDateString() === selectedDate.toDateString(); return `

${day}

`; }).join("")}

`; container.querySelector("#prev").onclick = () => { currentDate.setMonth(currentDate.getMonth() - 1); renderCalendar(); }; container.querySelector("#next").onclick = () => { currentDate.setMonth(currentDate.getMonth() + 1); renderCalendar(); }; container.querySelectorAll(".calendar-day:not(.empty)").forEach(day => { day.onclick = () => { if (!filterByDay) { selectedDate = new Date(year, month, +day.dataset.day); } renderCalendar(); updateFilteredData(selectedRango, selectedDate, filterByDay, aniversario); }; }); container.querySelector("#filter-switch").onchange = (e) => { filterByDay = e.target.checked; renderCalendar(); updateFilteredData(selectedRango, selectedDate, filterByDay, aniversario); }; container.querySelector("#rango-select").onchange = (e) => { selectedRango = e.target.value; updateFilteredData(selectedRango, selectedDate, filterByDay, aniversario); }; container.querySelector("#aniversario-input").oninput = (e) => { const value = parseInt(e.target.value, 10); aniversario = isNaN(value) ? null : value; updateFilteredData(selectedRango, selectedDate, filterByDay, aniversario); }; container.querySelector("#clear-aniversario").onclick = () => { const input = container.querySelector("#aniversario-input"); input.value = ""; aniversario = null; updateFilteredData(selectedRango, selectedDate, filterByDay, aniversario); }; } renderCalendar(); updateFilteredData(selectedRango, selectedDate, filterByDay, aniversario); container.querySelector("#filter-switch").checked = filterByDay; return container; }