Календарь для Блоггер

Иногда на блог или сайт, в зависимости от тематики, нужны календари. На Блоггере такого встроенного гаджета нет. Но в интернете можно найти много кодов интересных календариков, один я покажу сегодня. Устанавливается он в боковую панель или в подвал блога. Код один, но если поменять стиль оформления, то календарь можно изменить до неузнаваемости, под дизайн любого блога.

Добавляем гаджет на сайт так:

Нажимаем Дизайн/Добавить гаджет/HTML JAVA SCRIPT. Вставляем код.

Выглядит календарь так:

Код:

<div class="look-calendar">
<table id="calendar">
  <thead>
  <tr>
  <td><b>‹</b>
  <td colspan="5">
  <td><b>›</b>
  <tr class="dn"><td>Пн<td>Вт<td>Ср<td>Чт<td>Пт<td>Сб<td>Вс
  </td></td></td></td></td></td></td></tr></td></td></td></tr></thead>
  <tbody></tbody>
</table>
</div>
<style>.look-calendar {
    width:220px;
    border:1px solid #c0c0c0;
    padding:6px;
    margin: 0 auto;    
  }
  #calendar {
    width: 100%;
    line-height: 1.2em;
    font-size: 15px;
    text-align: center;
    border-spacing:0px;
  }
  #calendar tr.dn td {
    font-size: 15px;
  }
  #calendar thead tr:last-child {
    font-size: small;
    color: #555555;
  }
  #calendar thead tr:nth-child(1) td:nth-child(2) {
    color: #323232;
  }
  #calendar thead tr:nth-child(1) td:nth-child(1):hover,
  #calendar thead tr:nth-child(1) td:nth-child(3):hover {
    cursor: pointer;
  }
  #calendar tbody td {
    color: #2c567a;
  }
  #calendar tbody td:nth-child(n+6),
  #calendar .holiday {
    color: #e78c5c;
  }
  #calendar tbody td.today {
    background: #dc0000;
    color: #fff;
  }</style>
<script>function calendar(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('#' 

В коде можно менять оформление — цвет, размер шрифта и гаджета и так далее.

Ниже предлагаю посмотреть несколько примеров оформления.

Другой вариант оформления добавляем, удалив в первом коде выделенное красным от <style> до </style> и на это место вставляем код понравившегося календаря.

Вариант 1

.look-calendar {
    width:220px;
    padding:6px;
    margin: 0 auto; 
    background-color:#1c1d1b;  
  }
  #calendar {
    width: 100%;
    line-height: 1.2em;
    font-size: 15px;
    text-align: center;
    border-spacing:0px;
    border-width: 3px;
    border-style: solid;
    border-image: 
    linear-gradient(
      to bottom, 
      red, 
      rgba(0, 0, 0, 0)
    ) 1 100%;
}
  }
  #calendar tr.dn td {
    font-size: 15px;
  }
  #calendar thead tr:last-child {
    font-size: small;
    color: #ffffff;
  }
  #calendar thead tr:nth-child(1) td:nth-child(2) {
    color: #fc2c05;
  }
  #calendar thead tr:nth-child(1) td:nth-child(1):hover,
  #calendar thead tr:nth-child(1) td:nth-child(3):hover {
    cursor: pointer;
  }
  #calendar tbody td {
    color: #ecebeb;
  }
  #calendar tbody td:nth-child(n+6),
  #calendar .holiday {
    color: #ff3f05;
  }
  #calendar tbody td.today {
    background: #ff1919;
    color: #fff;
  }

Вариант 2

Расцветку градиента фона можно менять. В коде я выделила его синим цветом. Поменять можно генератором https://active-vision.ru/icon/gradient/

.look-calendar {
    width:250px;
background: -webkit-linear-gradient(0deg, rgb(25, 129, 227), rgb(86, 181, 184));
background: -moz-linear-gradient(0deg, rgb(25, 129, 227), rgb(86, 181, 184));
background: linear-gradient(0deg, rgb(25, 129, 227), rgb(86, 181, 184));
    padding:6px;
    margin: 0 auto;    
  }
  #calendar {
    width: 100%;
    line-height: 1.2em;
    font-size: 15px;
    text-align: center;
    border-spacing:0px;
  }
  #calendar tr.dn td {
    font-size: 15px;
  }
  #calendar thead tr:last-child {
    font-size: small;
    color: #ffffff;
  }
  #calendar thead tr:nth-child(1) td:nth-child(2) {
    color: #000000;
  }
  #calendar thead tr:nth-child(1) td:nth-child(1):hover,
  #calendar thead tr:nth-child(1) td:nth-child(3):hover {
    cursor: pointer;
  }
  #calendar tbody td {
    color: #000000;
  }
  #calendar tbody td:nth-child(n+6),
  #calendar .holiday {
    color: #ff0000;
  }
  #calendar tbody td.today {
    background: #f00000;
    color: #fff;
  }

Вариант 3

Здесь вариант с тенью, тень выделила в коде зелёным цветом. Тень так же можно поменять, используйте генератор - https://active-vision.ru/icon/box-shadow/

.look-calendar {
    width:250px;
-webkit-box-shadow: 5px 5px 5px -5px rgba(163, 170, 174, 0.6);
-moz-box-shadow: 5px 5px 5px -5px rgba(163, 170, 174, 0.6);
box-shadow: 5px 5px 5px -5px rgba(163, 170, 174, 0.6);
background: rgba(255, 255, 255, 1);
background: -o-linear-gradient(45deg,rgba(255, 255, 255, 1) 0%,rgba(226, 220, 242, 1) 69.5%,rgba(176, 237, 252, 1) 100%);
background: -moz-linear-gradient(45deg,rgba(255, 255, 255, 1) 0%,rgba(226, 220, 242, 1) 69.5%,rgba(176, 237, 252, 1) 100%);
background: -webkit-linear-gradient(45deg,rgba(255, 255, 255, 1) 0%,rgba(226, 220, 242, 1) 69.5%,rgba(176, 237, 252, 1) 100%);
background: linear-gradient(45deg,rgba(255, 255, 255, 1) 0%,rgba(226, 220, 242, 1) 69.5%,rgba(176, 237, 252, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#b0edfc",GradientType=1 );
    padding:6px;
    margin: 0 auto;    
  }
  #calendar {
    width: 100%;
    line-height: 1.2em;
    font-size: 20px;
    text-align: center;
    border-spacing:0px;
  }
  #calendar tr.dn td {
    font-size: 22px;
  }
  #calendar thead tr:last-child {
    font-size: 15px;
    color: #ffffff;
  }
  #calendar thead tr:nth-child(1) td:nth-child(2) {
    color: #000000;
  }
  #calendar thead tr:nth-child(1) td:nth-child(1):hover,
  #calendar thead tr:nth-child(1) td:nth-child(3):hover {
    cursor: pointer;
  }
  #calendar tbody td {
    color: #000000;
  }
  #calendar tbody td:nth-child(n+6),
  #calendar .holiday {
    color: #ff0000;
  }
  #calendar tbody td.today {
    background: #f00000;
    color: #fff;
  }

Вариант 4

В этом варианте добавлена рамка. Выделила её в коде розовым.

Генераторов рамок много. Установить можно не только простые рамочки, но и градиентные, анимированные, с различными эффектами и т.п.

https://html-css-js.com/css/generator/border-outline/ - рамки двойные, точечные и т.д.

https://inshabashka.blogspot.com/p/blog-page_57.html - градиентная рамка

.look-calendar {
    width:250px;
border-width:15px 15px 15px 15px;
border-style:inset inset inset inset;
border-color:#502ecc #752ecc #502ecc #392ecc;
    padding:6px;
    margin: 0 auto;    
  }
  #calendar {
    width: 100%;
    line-height: 1.2em;
    font-size: 22px;
    text-align: center;
    border-spacing:0px;
  }
  #calendar tr.dn td {
    font-size: 22px;
  }
  #calendar thead tr:last-child {
    font-size: 14px;
    color: #4c08fa;
  }
  #calendar thead tr:nth-child(1) td:nth-child(2) {
    color: #000000;
  }
  #calendar thead tr:nth-child(1) td:nth-child(1):hover,
  #calendar thead tr:nth-child(1) td:nth-child(3):hover {
    cursor: pointer;
  }
  #calendar tbody td {
    color: #000000;
  }
  #calendar tbody td:nth-child(n+6),
  #calendar .holiday {
    color: #3403f7;
  }
  #calendar tbody td.today {
    background: #9a7df7;
    color: #fff;
  }

Делайте календарь по своему вкусу меняя стили.