Music Player

Calendar

(PS: Yours will update per month. This one is just an example!)

<!-- HTML --> <div class="container"> <div class="calendar"> <h2 id="cal-title"></h2> <table> <thead> <tr> <th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th> <th>Thu</th><th>Fri</th><th>Sat</th> </tr> </thead> <tbody id="cal-body"></tbody> </table> </div> <div class="icons"> <div data-icon="earlyrelease"> <img src="[ADD IMG HERE]" /> Early release </div> <div data-icon="test"> <img src="[ADD IMG HERE]" /> Important date <span style="font-size: 11px;" title="Hover on the icon to see information about the important date!">ⓘ</span> </div> <div data-icon="event"> <img src="[ADD IMG HERE]" /> Test/quiz </div> <div data-icon="dayoff"> <img src="[ADD IMG HERE]" /> Day off </div> <iframe src="[Go to https://www.timeanddate.com/ to get an embedded custom clock with your local time!]" frameborder="0" width="110" height="110" style="margin-top: 18px; margin-left: 20px;"> </iframe> <iframe src="[Go to https://www.timeanddate.com/ to get an embedded custom clock with your local time!]" frameborder="0" width="57" height="19" style="margin-top: -2px; margin-left: 48px;"> </iframe> </div> </div> /* CSS */ .container { display: flex; gap: 40px; background: #fffaf3; border: 2px solid #d6cdba; padding: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); width: 93%; } .day { position: relative; font-family: "Give You Glory", cursive; } .day img.icon { width: 20px; height: 20px; position: absolute; bottom: 5px; right: 5px; opacity: 0.85; } .calendar { width: 70%; text-align: center; font-family: "Give You Glory", cursive; } .calendar h2 { margin-bottom: 10px; font-weight: 600; color:#5c4a38; } .calendar table { width: 100%; border-collapse: collapse; } .calendar th { padding: 6px; font-weight: 600; color: #6b5d4d; } .calendar td { padding: 10px; border: 1px solid #e0d6c6; height: 40px; cursor: pointer; position: relative; } .calendar td:hover { background: #f0eae2; } .calendar td.today { background: #e7ddcb; box-shadow: inset 0 0 5px #b59e84; font-weight: bold; } .icon { position: absolute; bottom: 2px; right: 2px; width: 20px; height: 20px; } .icons { width: 140px; display: flex; flex-direction: column; gap: 20px; } .icons div { display: flex; align-items: center; gap: 8px; } .icons img { width: 28px; height: 28px; } // JS <script> const presetIcons = { 17: "[ADD IMG HERE]", 22: "[ADD IMG HERE]", 23: "[ADD IMG HERE]", 24: "[ADD IMG HERE]", 25: "[ADD IMG HERE]", 26: "[ADD IMG HERE]", 27: "[ADD IMG HERE]", 28: "[ADD IMG HERE]", 29: "[ADD IMG HERE]", 30: "[ADD IMG HERE]", 31: "[ADD IMG HERE]", 5: "[ADD IMG HERE]", 10: "[ADD IMG HERE]", 11: "[ADD IMG HERE]" }; const presetTitles = { 10: "", 11: "", 5: "", 25: "", 31: "" }; function generateCalendar() { const now = new Date(); const month = now.getMonth(); const year = now.getFullYear(); const monthNames = [ "January","February","March","April","May","June", "July","August","September","October","November","December" ]; document.getElementById("cal-title").textContent = monthNames[month] + " " + year; const body = document.getElementById("cal-body"); body.innerHTML = ""; const firstDay = new Date(year, month, 1).getDay(); const daysInMonth = new Date(year, month + 1, 0).getDate(); let row = document.createElement("tr"); for (let i = 0; i < firstDay; i++) { row.appendChild(document.createElement("td")); } for (let day = 1; day <= daysInMonth; day++) { const cell = document.createElement("td"); cell.textContent = day; if (day === now.getDate()) { cell.classList.add("today"); } if (presetIcons[day]) { const img = document.createElement("img"); img.src = presetIcons[day]; img.className = "icon"; cell.appendChild(img); } if (presetTitles[day]) { cell.title = presetTitles[day]; } row.appendChild(cell); if ((firstDay + day) % 7 === 0) { body.appendChild(row); row = document.createElement("tr"); } } if (row.children.length > 0) { body.appendChild(row); } } generateCalendar(); </script>

Readable font button