დაყენების ინსტრუქცია: ქვემოთ მოცემული კოდი ჩავსვით საიტის ბლოკში
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> <meta name="apple-mobile-web-app-title" content="CodePen"> <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111" /> <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script> <title>CodePen - Calendar</title> <link rel="canonical" href="https://codepen.io/ady-naga/pen/WNgVZXQ"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; align-items: center; padding: 0 10px; justify-content: center; min-height: 100vh; background: #ADD8E6; font-family: 'Helvetica Neue', sans-serif; } .wrapper { width: 450px; background: #fff; border-radius: 10px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12); } .wrapper header { display: flex; align-items: center; padding: 25px 30px 10px; justify-content: space-between; background: #ff898d; border-radius: 10px 10px 0 0; } header .icons { display: flex; } header .icons span { height: 38px; width: 38px; margin: 0 1px; cursor: pointer; color: #878787; text-align: center; font-size: 1.9rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: 50%; } .icons span:last-child { margin-right: -10px; } header .icons span:hover { background: #f2f2f2; } header .current-date { font-size: 1.45rem; font-weight: 500; } .calendar { padding: 20px; } .calendar ul { display: flex; flex-wrap: wrap; list-style: none; text-align: center; } .calendar .days { margin-bottom: 20px; } .calendar li { color: #333; width: calc(100% / 7); font-size: 1.07rem; } .calendar .weeks li { font-weight: 500; cursor: default; } .calendar .days li { z-index: 1; cursor: pointer; position: relative; margin-top: 30px; } .days li.inactive { color: #aaa; } .days li.active { color: #fff; } .days li::before { position: absolute; content: ""; left: 50%; top: 50%; height: 40px; width: 40px; z-index: -1; border-radius: 50%; transform: translate(-50%, -50%); } .days li.active::before { background: #1e90ff; } .days li:not(.active):hover::before { background: #f2f2f2; } </style> <script> window.console = window.console || function(t) {}; </script> </head> <body translate="no"> <div class="wrapper"> <header> <p class="current-date"></p> <div class="icons"> <span id="prev"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-left-fill" viewBox="0 0 16 16"> <path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/> </svg> </span> <span id="next"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-right-fill" viewBox="0 0 16 16"> <path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/> </svg> </span> </div> </header> <div class="calendar"> <ul class="weeks"> <li>Sun</li> <li>Mon</li> <li>Tue</li> <li>Wed</li> <li>Thu</li> <li>Fri</li> <li>Sat</li> </ul> <ul class="days"></ul> </div> </div> <script id="rendered-js" > const daysTag = document.querySelector(".days"); const currentDate = document.querySelector(".current-date"); const prevNextIcon = document.querySelectorAll(".icons span"); let currYear = new Date().getFullYear(); let currMonth = new Date().getMonth(); const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; const renderCalendar = () => { const date = new Date(currYear, currMonth, 1); let firstDayofMonth = date.getDay(); let lastDateofMonth = new Date(currYear, currMonth + 1, 0).getDate(); let lastDayofMonth = new Date(currYear, currMonth, lastDateofMonth).getDay(); let lastDateofLastMonth = new Date(currYear, currMonth, 0).getDate(); let liTag = ""; for (let i = firstDayofMonth; i > 0; i--) {if (window.CP.shouldStopExecution(0)) break; liTag += `<li class="inactive">${lastDateofLastMonth - i + 1}</li>`; }window.CP.exitedLoop(0); for (let i = 1; i <= lastDateofMonth; i++) {if (window.CP.shouldStopExecution(1)) break; let isToday = i === new Date().getDate() && currMonth === new Date().getMonth() && currYear === new Date().getFullYear() ? "active" : ""; liTag += `<li class="${isToday}">${i}</li>`; }window.CP.exitedLoop(1); for (let i = lastDayofMonth; i < 6; i++) {if (window.CP.shouldStopExecution(2)) break; liTag += `<li class="inactive">${i - lastDayofMonth + 1}</li>`; }window.CP.exitedLoop(2); currentDate.innerText = `${months[currMonth]} ${currYear}`; daysTag.innerHTML = liTag; }; renderCalendar(); prevNextIcon.forEach(icon => { icon.addEventListener("click", () => { currMonth = icon.id === "prev" ? currMonth - 1 : currMonth + 1; if (currMonth < 0 || currMonth > 11) { currYear = icon.id === "prev" ? currYear - 1 : currYear + 1; currMonth = currMonth < 0 ? 11 : 0; } renderCalendar(); }); }); //# sourceURL=pen.js </script> </body> </html>
დააკოპირეთ
