Calendar JavaScript
// Get the current date at load, and move to the first. let current_first = new Date(); current_first.setDate(1); /* * Fill the calendar. */ function fillin() { // Copy the current date let thetime = new Date(current_first); // Current month and the first day of the week. let month = thetime.getMonth(); let dotw = thetime.getDay(); // Set the top title. const months = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November","December" ]; document.getElementById("moname").textContent = months[month] + " " + thetime.getFullYear(); // Get all the day boxes. let boxes = document.querySelectorAll(".week div"); let dotm = 1; for(d = dotw; true; d++) { thetime.setDate(dotm); if(thetime.getMonth() != month) break; boxes[d].textContent = dotm++; } // Hide unneeded rows at the bottom. I just created a temp function // to call. Adding or removing the hidden class, if it's already there // or already absent, is not an error. let adjhide = (id,hidden) => { if(hidden) document.getElementById(id).classList.add("hidden"); else document.getElementById(id).classList.remove("hidden"); } adjhide("w6", d <= 35); adjhide("w5", d <= 28); } fillin(); /* * Clear the day boxes */ function clrdays() { document.querySelectorAll(".week div").forEach((x) => x.textContent = ''); } /* * Go to the next month or previous. Send arg 32 for the next, or 0 for the * previous. */ function inc_dec(delta) { current_first.setDate(delta); current_first.setDate(1); clrdays(); fillin(); } /* * Set the arrow bindings. */ document.getElementById("prev").addEventListener("click", () => inc_dec(0) ) document.getElementById("next").addEventListener("click", () => inc_dec(32) )