დაყენების ინსტრუქცია: ქვემოთ მოყვანილი სკრიპტი ჩასვით საიტის ბლოკში
<meta charset="UTF-8"> <link href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" rel="apple-touch-icon" type="image/png" /><meta name="apple-mobile-web-app-title" content="CodePen"> <link href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" rel="shortcut icon" type="image/x-icon" /> <link color="#111" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" rel="mask-icon" type="image/x-icon" /><script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script> <title></title> <link href="https://codepen.io/zahidmuhammed/pen/GRmmNZb" rel="canonical" /> <style type="text/css">* { box-sizing: border-box; } body { margin: 0; padding: 0; } .container { min-height: 100vh; background-color: #e0e0e0; display: flex; justify-content: center; flex-direction: column; text-align: center; align-items: center; } .header { display: flex; justify-content: space-around; padding: 10px; margin: 15px; width: 295px; user-select: none; height: fit-content; color: #ffffff; background-color: #32b59d; border-radius: 5px; } .content, .weeks { margin: 15px 0; display: grid; grid-template-columns: repeat(7, auto); gap: 10px 20px; } .box, .weeks > span { width: 25px; height: 25px; line-height: 25px; border-radius: 3px; } .weeks > span { background-color: #44ccb3; } .box { background-color: #e0e0e0; box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff; } </style> <div id="root"> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js'></script><script id="rendered-js" > const day31 = [0, 2, 4, 6, 7, 9, 11]; const day30 = [3, 5, 8, 10]; const months = ["იანვარი", "თებერვალი", "მარტი", "აპრილი", "მაისი", "ივნისი", "ივლისი", "აგვისტო", "სექტემბერი", "ოქტომბერი", "ნოემბერი", "დეკემბერი"]; const dayName = ["კვირა", "ორშაბათი", "სამშაბათი", "ოთხშაბათი", "ხუთშაბათი", "პარასკევი", "შაბათი"]; const Header = ({ date }) => { return /*#__PURE__*/( React.createElement("div", { className: "header" }, /*#__PURE__*/ React.createElement("div", null, dayName[date.getDay()]), /*#__PURE__*/ React.createElement("div", null, months[date.getMonth()], " - ", date.getDate()), /*#__PURE__*/ React.createElement("div", null, date.getFullYear()))); }; const cal_data = (month, year) => { if (day31.includes(month)) return [...Array(31).keys()];else if (day30.includes(month)) return [...Array(30).keys()]; if (0 === year % 4 && 0 !== year % 100 || 0 === year % 400) return [...Array(29).keys()];else return [...Array(28).keys()]; }; const Box = ({ number, start, today }) => { if (number === 0) { if (number === today - 1) return /*#__PURE__*/( React.createElement("div", { className: "box", style: { backgroundColor: "#ff0c0c", color: "#ffffff", gridColumnStart: start } }, number + 1));else return /*#__PURE__*/( React.createElement("div", { className: "box", style: { gridColumnStart: start } }, number + 1)); } else if (number === today - 1) return /*#__PURE__*/( React.createElement("div", { className: "box", style: { backgroundColor: "#ff0c0c", color: "#ffffff" } }, number + 1));else return /*#__PURE__*/React.createElement("div", { className: "box" }, number + 1); }; const App = () => { const date = new Date(); const today = date.getDate(); const month = date.getMonth(); const year = date.getFullYear(); const column_start = new Date(year, month, 1).getDay() + 1; const boxes = cal_data(month, year); return /*#__PURE__*/( React.createElement("div", { className: "container" }, /*#__PURE__*/ React.createElement(Header, { date: date }), /*#__PURE__*/ React.createElement("div", { className: "weeks" }, /*#__PURE__*/ React.createElement("span", null, "კვ"), /*#__PURE__*/React.createElement("span", null, "ორ"), /*#__PURE__*/React.createElement("span", null, "სა"), /*#__PURE__*/React.createElement("span", null, "ოთ"), /*#__PURE__*/ React.createElement("span", null, "ხუ"), /*#__PURE__*/React.createElement("span", null, "პა"), /*#__PURE__*/React.createElement("span", null, "შა")), /*#__PURE__*/ React.createElement("div", { className: "content" }, boxes.map((item, index) => /*#__PURE__*/ React.createElement(Box, { number: item, key: index, start: column_start, today: today }))))); }; ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById("root")); //# sourceURL=pen.js </script><script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js"></script>
დააკოპირეთ
