Le code HTML

Dans un élément HTML coller le code HTML et JS du calendrier.

Copier le code
<form id="calendarForm"> <select id="month" onchange="generateCalendar()"></select> <select id="year" onchange="generateCalendar()"></select> </form> <div id="calendar"></div> <script> function generateCalendar () { /* --- conversion explicite --- */ const month = +document.getElementById("month").value; const year = +document.getElementById("year").value; const cal = document.getElementById("calendar"); cal.innerHTML = ""; const today = new Date(); const firstDay = new Date(year, month, 1); const daysInMonth = new Date(year, month + 1, 0).getDate(); const startDay = (firstDay.getDay() + 6) % 7; // Lundi = 0 let html = "<table>"; html += "<tr class='header'><td>Lun</td><td>Mar</td><td>Mer</td><td>Jeu</td><td>Ven</td><td>Sam</td><td>Dim</td></tr><tr>"; /* cases vides avant le 1er */ for (let i = 0; i < startDay; i++) html += "<td></td>"; /* jours du mois */ for (let d = 1; d <= daysInMonth; d++) { const isToday = d === today.getDate() && month === today.getMonth() && year === today.getFullYear(); html += `<td class="${isToday ? "today" : ""}">${d}</td>`; if ((d + startDay) % 7 === 0) html += "</tr><tr>"; } /* cases vides après le dernier jour */ const remain = (daysInMonth + startDay) % 7; if (remain) for (let i = remain; i < 7; i++) html += "<td></td>"; html += "</tr></table>"; cal.innerHTML = html; } /* remplissage des sélecteurs */ const monthSel = document.getElementById("month"); for (let i = 0; i < 12; i++) { monthSel.insertAdjacentHTML("beforeend", `<option value="${i}">${new Date(0, i).toLocaleString('fr-FR',{month:'long'})}</option>`); } const yearSel = document.getElementById("year"); const thisYear = new Date().getFullYear(); for (let y = thisYear - 10; y <= thisYear + 10; y++) { yearSel.insertAdjacentHTML("beforeend", `<option value="${y}">${y}</option>`); } monthSel.value = new Date().getMonth(); yearSel.value = thisYear; generateCalendar(); </script>

Le code CSS

Code à placer dans le css de l'élément HTML

Copier le code
.$ table { border-collapse: collapse; width: 100%; } .$ td { width: 14.28%; height: 50px; text-align: center; border: 1px solid #ccc; } .$ .header { background-color: #f2f2f2; font-weight: bold; } .$ select { min-width: 49%; padding: 5px 5px 5px 5px; font-size: 18px; border-bottom : none; border-top : none; border-left : 1px solid #ccc; border-right : none; text-align:center; } .$ form { background-color: #e9e9ed; } .$ .today { background-color: #90EE90; /* Vert pour le jour actuel */ }