დაყენების ინსტრუქცია: ქვემოთ მოყვანილი კოდი ჩავსვათ საიტის ბლოკში
<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/bclinkinbeard/pen/MEZxMe" rel="canonical" /><meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css">* { font-family: Helvetica, Arial, sans-serif; } #calendar { width: 600px; height: 400px; border-collapse: collapse; } #calendar tbody td { border: 1px solid black; text-align: right; vertical-align: top; width: 14%; } #calendar td.empty { border: none; } </style> <script> window.console = window.console || function(t) {}; </script> <table id="calendar"> </table> <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js'></script><script id="rendered-js" > // October 2017, generated with https://nodei.co/npm/calendar-matrix/ const month = [ [1, 2, 3, 4, 5, 6, 7], [8, 9, 10, 11, 12, 13, 14], [15, 16, 17, 18, 19, 20, 21], [22, 23, 24, 25, 26, 27, 28], [29, 30, 31, -1, -2, -3, -4]]; const monthNames = [ 'იანვარი', 'თებერვალი', 'მარტი', 'აპრილი', 'მაისი', 'ივნისი', 'ივლისი', 'აგვისტო', 'სექტემბერი', 'ოქტომბერი', 'ნოემბერი', 'დეკემბერი']; const dayNames = [ 'კვირა', 'ორშაბათი', 'სამშაბათი', 'ოთხშაბათი', 'ხუთშაბათი', 'პარასკევი', 'შაბათი']; const monthNum = 9; const table = d3.select('#calendar'); const header = table.append('thead'); const body = table.append('tbody'); header. append('tr'). append('td'). attr('colspan', 7). style('text-align', 'center'). append('h2'). text(monthNames[monthNum]); header. append('tr'). selectAll('td'). data(dayNames). enter(). append('td'). style('text-align', 'center'). text(function (d) { return d; }); month.forEach(function (week) { body. append('tr'). selectAll('td'). data(week). enter(). append('td'). attr('class', function (d) { return d > 0 ? '' : 'empty'; }). text(function (d) { return d > 0 ? d : ''; }); }); //# sourceURL=pen.js </script>
დააკოპირეთ
