Календарь для Блоггер
Добавляем гаджет на сайт так:
Нажимаем Дизайн/Добавить гаджет/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
.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;
}
Делайте календарь по своему вкусу меняя стили.
Благодарю!
ОтветитьУдалить