31:T1163,// Componente calendario riutilizzabile, con navigazione mese/anno. // year, month (0-11) sono il mese INIZIALE mostrato; highlighted: array di "YYYY-MM-DD" // Restituisce un elemento DOM compatibile con view(): ha .value e dispatcha "input" // quando l'utente seleziona una data evidenziata (non quando cambia semplicemente mese). function miniCalendar({ year, month, highlighted = [], value = null, locale = "it-IT" } = {}) { let currentYear = year; let currentMonth = month; const highlightedSet = new Set(highlighted); const fmt = d3.timeFormat("%Y-%m-%d"); // Abbreviazioni italiane classiche del calendario (Lu..Do), nell'ordine // corrispondente ai 7 giorni generati da mondayWeek (lunedì per primo). const weekdayLabels = ["Lu", "Ma", "Me", "Gio", "Ve", "Sa", "Do"]; const mondayReference = d3.timeMonday(new Date(2024, 0, 1)); // un lunedì noto const mondayWeek = d3.timeDay.range( mondayReference, d3.timeDay.offset(mondayReference, 7) ); // i 7 giorni Lu..Do, uno per giorno const root = html`

`; root.value = value; const prevButton = html``; const nextButton = html``; const label = html`

`; const header = html`

`; header.append(prevButton, label, nextButton); const grid = html`

`; function render() { grid.replaceChildren(); label.textContent = new Date(currentYear, currentMonth, 1).toLocaleDateString( locale, { month: "long", year: "numeric" } ); for (let i = 0; i < mondayWeek.length; i++) { const cell = html`

`; cell.textContent = weekdayLabels[i]; grid.append(cell); } const firstOfMonth = new Date(currentYear, currentMonth, 1); const lastOfMonth = new Date(currentYear, currentMonth + 1, 0); const startDay = (firstOfMonth.getDay() + 6) % 7; // lunedì = 0 const daysInMonth = lastOfMonth.getDate(); for (let i = 0; i < startDay; i++) { grid.append(html`

`); } for (let day = 1; day <= daysInMonth; day++) { const date = new Date(currentYear, currentMonth, day); const key = fmt(date); const isHighlighted = highlightedSet.has(key); const isSelected = key === root.value; const cell = html`