Есть скрипт календаря, нужно чтобы если дней в месяце меньше чем ячеек в таблице - пустые ячейки не форматировались ( не отделялись границами).
Как вариант красить их границы в белый цвет, залить цветом.... Или посоветуйте другой аналогичный виджет (если этот поправить нельзя)
пример можно посмотреть на сайте - [Ссылки могут видеть только зарегистрированные пользователи. ]
Код:
Java Code:
  1. <style type="text/css">
  2.     .tg {border-collapse:collapse;border-spacing:0;border-style:solid;border-width:1px;border-color:#561;margin:0px auto;}
  3.  
  4.     .tg td {font-family: Arial, sans-serif;font-size:14px;padding:5px 8px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#f0f0f0;color:#333;background-color:#fff;}
  5.  
  6.     .tg th {font-family: Arial, sans-serif;font-size:14px;font-weight:normal;padding:5px 10px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#f0f0f0;color:#333;background-color:#f0f0f0;}
  7.  
  8.     .tg .tg-s6z2 {text-align: center}
  9.  
  10. .tg-wrap {float: none; position: relative;}
  11.  
  12.     
  13.     @media screen and (max-width: 767px) {
  14.         .tg {width: auto !important;}
  15.         .tg col {width: auto !important;}
  16.         .tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch; margin: auto 0px;}
  17.     }
  18.  
  19. #calendar3 thead tr:last-child {
  20. font-size: small;
  21. color: rgb(85, 85, 85);
  22. }
  23. #calendar3 tbody td {
  24. color: rgb(44, 86, 122);
  25. }
  26. #calendar3 tbody td:nth-child(n+6), #calendar3 .holiday {
  27. color: rgb(126, 13, 1);
  28. }
  29. #calendar3 tbody td.today {
  30. outline: 3px solid red;
  31. }
  32.  
  33.     #polegod {width:5em; padding-left: 0.5em;}
  34.     #polegod::-webkit-inner-spin-button { opacity: 1; }
  35.  
  36. </style>
  37.  
  38. <div class="tg-wrap"><table id="calendar3" class="tg">
  39.     <thead>
  40.     <tr>
  41.         <th class="tg-s6z2" colspan="4"><select>
  42.             <option value="0">Январь</option>
  43.             <option value="1">Февраль</option>
  44.             <option value="2">Март</option>
  45.             <option value="3">Апрель</option>
  46.             <option value="4">Май</option>
  47.             <option value="5">Июнь</option>
  48.             <option value="6">Июль</option>
  49.             <option value="7">Август</option>
  50.             <option value="8">Сентябрь</option>
  51.             <option value="9">Октябрь</option>
  52.             <option value="10">Ноябрь</option>
  53.             <option value="11">Декабрь</option>
  54.         </select></th>
  55.         <th class="tg-s6z2" colspan="3"><input type="number" id="polegod" value="" min="0" max="9999" size="4"></th>
  56.     </tr>
  57.     <tr>
  58.         <td class="tg-s6z2">Пн</td>
  59.         <td class="tg-s6z2">Вт</td>
  60.         <td class="tg-s6z2">Ср</td>
  61.         <td class="tg-s6z2">Чт</td>
  62.         <td class="tg-s6z2">Пт</td>
  63.         <td class="tg-s6z2">Сб</td>
  64.         <td class="tg-s6z2">Вс</td>
  65.     </tr>
  66.     </thead><tbody></tbody></table></div>
  67.  
  68. <script>
  69.     function Calendar3(id, year, month) {
  70.         var Dlast = new [Ссылки могут видеть только зарегистрированные пользователи. ](year,month+1,0).getDate(),
  71.             D = new [Ссылки могут видеть только зарегистрированные пользователи. ](year,month,Dlast),
  72.             DNlast = D.getDay(),
  73.             DNfirst = new [Ссылки могут видеть только зарегистрированные пользователи. ](D.getFullYear(),D.getMonth(),1).getDay(),
  74.             calendar = '<tr>',
  75.             m = document.querySelector('#'+id+' option[value="' + D.getMonth() + '"]'),
  76.             g = document.querySelector('#'+id+' input');
  77.         if (DNfirst != 0) {
  78.             for(var  i = 1; i < DNfirst; i++) calendar += '<td>';
  79.         }else{
  80.             for(var  i = 0; i < 6; i++) calendar += '<td>';
  81.         }
  82.         for(var  i = 1; i <= Dlast; i++) {
  83.             if (i == new [Ссылки могут видеть только зарегистрированные пользователи. ]().getDate() && D.getFullYear() == new [Ссылки могут видеть только зарегистрированные пользователи. ]().getFullYear() && D.getMonth() == new [Ссылки могут видеть только зарегистрированные пользователи. ]().getMonth()) {
  84.                 calendar += '<td class="today">' + i;
  85.             } else {
  86.                 calendar += '<td>' + i;
  87.             }
  88.             if (new [Ссылки могут видеть только зарегистрированные пользователи. ](D.getFullYear(),D.getMonth(),i).getDay() == 0) {
  89.                 calendar += '<tr>';
  90.             }
  91.         }
  92.         for(var  i = DNlast; i < 7; i++) calendar += '<td>&nbsp;';
  93.         document.querySelector('#'+id+' tbody').innerHTML = calendar;
  94.         g.value = D.getFullYear();
  95.         m.selected = true;
  96.         if (document.querySelectorAll('#'+id+' tbody tr').length < 6) {
  97.             document.querySelector('#'+id+' tbody').innerHTML += '<tr><td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;';
  98.         }
  99.         document.querySelector('#'+id+' option[value="' + new [Ссылки могут видеть только зарегистрированные пользователи. ]().getMonth() + '"]').style.color = 'rgb(230, 33, 33)'; // в выпадающем списке выделен текущий месяц
  100.     }
  101.     Calendar3("calendar3",new [Ссылки могут видеть только зарегистрированные пользователи. ]().getFullYear(),new [Ссылки могут видеть только зарегистрированные пользователи. ]().getMonth());
  102.     document.querySelector('#calendar3').onchange = function Kalendar3() {
  103.         Calendar3("calendar3",document.querySelector('#calendar3 input').value,parseFloat(document.querySelector('#calendar3 select').options[document.querySelector('#calendar3 select').selectedIndex].value));
  104.     }
  105. </script>