დაყენების ინსტრუქცია: ქვემოთ მოცემული კოდი ჩასვით ინფორმერში {დატესტილია და 100% მუშაა}
კოდი:
<style> #calendar2 { width: 100%; font: monospace; line-height: 1.2em; font-size: 15px; text-align: center; } #calendar2 thead tr:last-child { font-size: small; color: rgb(85, 85, 85); } #calendar2 thead tr:nth-child(1) td:nth-child(2) { color: rgb(50, 50, 50); } #calendar2 thead tr:nth-child(1) td:nth-child(1):hover, #calendar2 thead tr:nth-child(1) td:nth-child(3):hover { cursor: pointer; } #calendar2 tbody td { color: rgb(44, 86, 122); } #calendar2 tbody td:nth-child(n+6), #calendar2 .holiday { color: rgb(231, 140, 92); } #calendar2 tbody td.today { background: rgb(220, 0, 0); color: #fff; } </style> <table id="calendar2"> <thead> <tr><td>‹<td colspan="5"><td>› <tr><td>ორ<td>სა<td>ოთ<td>ხუ<td>პა<td>შა<td>კვ <tbody> </table> <script> function Calendar2(id, year, month) { var Dlast = new Date(year,month+1,0).getDate(), D = new Date(year,month,Dlast), DNlast = new Date(D.getFullYear(),D.getMonth(),Dlast).getDay(), DNfirst = new Date(D.getFullYear(),D.getMonth(),1).getDay(), calendar = '<tr>', month=["იანვარი","თებერვალი","მარტი","აპრილი","მაისი","ივნისი","ივლისი","აგვისტო","სექტემბერი","ოქტომბერი","ნოემბერი","დეკემბერი"]; if (DNfirst != 0) { for(var i = 1; i < DNfirst; i++) calendar += '<td>'; }else{ for(var i = 0; i < 6; i++) calendar += '<td>'; } for(var i = 1; i <= Dlast; i++) { if (i == new Date().getDate() && D.getFullYear() == new Date().getFullYear() && D.getMonth() == new Date().getMonth()) { calendar += '<td class="today">' + i; }else{ calendar += '<td>' + i; } if (new Date(D.getFullYear(),D.getMonth(),i).getDay() == 0) { calendar += '<tr>'; } } for(var i = DNlast; i < 7; i++) calendar += '<td> '; document.querySelector('#'+id+' tbody').innerHTML = calendar; document.querySelector('#'+id+' thead td:nth-child(2)').innerHTML = month[D.getMonth()] +' '+ D.getFullYear(); document.querySelector('#'+id+' thead td:nth-child(2)').dataset.month = D.getMonth(); document.querySelector('#'+id+' thead td:nth-child(2)').dataset.year = D.getFullYear(); if (document.querySelectorAll('#'+id+' tbody tr').length < 6) { // чтобы при перелистывании месяцев не "подпрыгивала" вся страница, добавляется ряд пустых клеток. Итог: всегда 6 строк для цифр document.querySelector('#'+id+' tbody').innerHTML += '<tr><td> <td> <td> <td> <td> <td> <td> '; } } Calendar2("calendar2", new Date().getFullYear(), new Date().getMonth()); // переключатель минус месяц document.querySelector('#calendar2 thead tr:nth-child(1) td:nth-child(1)').onclick = function() { Calendar2("calendar2", document.querySelector('#calendar2 thead td:nth-child(2)').dataset.year, parseFloat(document.querySelector('#calendar2 thead td:nth-child(2)').dataset.month)-1); } // переключатель плюс месяц document.querySelector('#calendar2 thead tr:nth-child(1) td:nth-child(3)').onclick = function() { Calendar2("calendar2", document.querySelector('#calendar2 thead td:nth-child(2)').dataset.year, parseFloat(document.querySelector('#calendar2 thead td:nth-child(2)').dataset.month)+1); } </script>
დააკოპირეთ
