დაყენების ინსტრუქცია: სკრიპტი ჩასვით საიტის ბლოკში
<!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/B8bop/pen/DOQJyJ"> <link rel='stylesheet' href='https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css'> <style> body{ background-color: #F5F1E9; } #calendar{ margin-left: auto; margin-right: auto; width: 320px; font-family: 'Lato', sans-serif; } #calendar_weekdays div{ display:inline-block; vertical-align:top; } #calendar_content, #calendar_weekdays, #calendar_header{ position: relative; width: 320px; overflow: hidden; float: left; z-index: 10; } #calendar_weekdays div, #calendar_content div{ width:40px; height: 40px; overflow: hidden; text-align: center; background-color: #FFFFFF; color: #787878; } #calendar_content{ -webkit-border-radius: 0px 0px 12px 12px; -moz-border-radius: 0px 0px 12px 12px; border-radius: 0px 0px 12px 12px; } #calendar_content div{ float: left; } #calendar_content div:hover{ background-color: #F8F8F8; } #calendar_content div.blank{ background-color: #E8E8E8; } #calendar_header, #calendar_content div.today{ zoom: 1; filter: alpha(opacity=70); opacity: 0.7; } #calendar_content div.today{ color: #FFFFFF; } #calendar_header{ width: 100%; height: 37px; text-align: center; background-color: #FF6860; padding: 18px 0; -webkit-border-radius: 12px 12px 0px 0px; -moz-border-radius: 12px 12px 0px 0px; border-radius: 12px 12px 0px 0px; } #calendar_header h1{ font-size: 1.5em; color: #FFFFFF; float:left; width:70%; } i[class^=icon-chevron]{ color: #FFFFFF; float: left; width:15%; border-radius: 50%; } </style> </head> <body translate="no"> <head> <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> </head> <body> <div id="calendar"> <div id="calendar_header"><i class="icon-chevron-left"></i> <h1></h1><i class="icon-chevron-right"></i> </div> <div id="calendar_weekdays"></div> <div id="calendar_content"></div> </div> </body> <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script id="rendered-js" > $(function () {function c() {p();var e = h();var r = 0;var u = false;l.empty();while (!u) {if (window.CP.shouldStopExecution(0)) break;if (s[r] == e[0].weekday) {u = true;} else {l.append('<div class="blank"></div>');r++;}}window.CP.exitedLoop(0);for (var c = 0; c < 42 - r; c++) {if (window.CP.shouldStopExecution(1)) break;if (c >= e.length) {l.append('<div class="blank"></div>');} else {var v = e[c].day;var m = g(new Date(t, n - 1, v)) ? '<div class="today">' : "<div>";l.append(m + "" + v + "</div>");}}window.CP.exitedLoop(1);var y = o[n - 1];a.css("background-color", y).find("h1").text(i[n - 1] + " " + t);f.find("div").css("color", y);l.find(".today").css("background-color", y);d();}function h() {var e = [];for (var r = 1; r < v(t, n) + 1; r++) {if (window.CP.shouldStopExecution(2)) break;e.push({ day: r, weekday: s[m(t, n, r)] });}window.CP.exitedLoop(2);return e;}function p() {f.empty();for (var e = 0; e < 7; e++) {if (window.CP.shouldStopExecution(3)) break;f.append("<div>" + s[e].substring(0, 3) + "</div>");}window.CP.exitedLoop(3);}function d() {var t;var n = $("#calendar").css("width", e + "px");n.find(t = "#calendar_weekdays, #calendar_content").css("width", e + "px").find("div").css({ width: e / 7 + "px", height: e / 7 + "px", "line-height": e / 7 + "px" });n.find("#calendar_header").css({ height: e * (1 / 7) + "px" }).find('i[class^="icon-chevron"]').css("line-height", e * (1 / 7) + "px");}function v(e, t) {return new Date(e, t, 0).getDate();}function m(e, t, n) {return new Date(e, t - 1, n).getDay();}function g(e) {return y(new Date()) == y(e);}function y(e) {return e.getFullYear() + "/" + (e.getMonth() + 1) + "/" + e.getDate();}function b() {var e = new Date();t = e.getFullYear();n = e.getMonth() + 1;}var e = 480;var t = 2013;var n = 9;var r = [];var i = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];var s = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];var o = ["#16a085", "#1abc9c", "#c0392b", "#27ae60", "#FF6860", "#f39c12", "#f1c40f", "#e67e22", "#2ecc71", "#e74c3c", "#d35400", "#2c3e50"];var u = $("#calendar");var a = u.find("#calendar_header");var f = u.find("#calendar_weekdays");var l = u.find("#calendar_content");b();c();a.find('i[class^="icon-chevron"]').on("click", function () {var e = $(this);var r = function (e) {n = e == "next" ? n + 1 : n - 1;if (n < 1) {n = 12;t--;} else if (n > 12) {n = 1;t++;}c();};if (e.attr("class").indexOf("left") != -1) {r("previous");} else {r("next");}});}); //# sourceURL=pen.js </script> <script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js"></script> </body> </html>
დააკოპირეთ
