С утра я вешала календарь событий у себя дома на стенку и меня осенило что надо бы поискать коды для календарей на форум/сайт. Для тех кто не знает, календарь событий - это такая штука, которую используют чтобы устраивать праздничные марафоны. Например, пользователи открывают каждый день по новой ячейки и делают что там говорится.
АДАПТИВНЫЙ КАЛЕНДАРЬ СОБЫТИЙ НА HTML&CSS
Позволяет добавить и стилизовать календарь событий на Новый год (Рождество).
# увеличивается по клику
Автор скрипта: Ian Yates, полная статья с уроком на английском вот здесь. Перевод специально для forumd.ru.
Большой плюс этого календаря в том что он на css и написан так чтобы подстраиваться под мобильные:
# увеличивается по клику
Администраторы форумов mybb&Co могут ставить себе такое на админ-страницы: Администрирование - Страницы. Проверено, там работает!
Картинки в стиле стоят для примера, можно вообще заменить на любые.
CSSСтавить либо туда где стоят стили сайта или фрорума, либо рядом с html частью, но тогда код надо обернуть в теги <style>тут ваш цсс код</style>
HTMLПоясненияВо-первых, пожалуйста не удаляйте копирайт из хтмл:
<footer><a href='http://webdesign.tutsplus.com/tutorials/how-to-build-a-festive-advent-calendar-with-css-grid--cms-30070'>Envato Tuts+ 2017 ☃️</a>
</footer>Кстати, туда (выше или ниже) при желании можно добавить свой текст или ссылки.
Во-вторых, сами дни (их количество) добавляются и удаляются. Сначала надо изменить хтмл часть с днями:
<section class='grid-1'>
<div class='title'></div>
<div class='day-1'></div>
<div class='day-2'></div>
<div class='day-3'></div>
<div class='day-4'></div>
<div class='day-5'></div>
<div class='day-6'></div>
<div class='day-7'></div>
<div class='day-8'></div>
<div class='day-9'></div>
<div class='day-10'></div>
<div class='day-11'></div>
<div class='day-12'></div>
<div class='day-13'></div>
<div class='day-14'></div>
<div class='day-15'></div>
<div class='day-16'></div>
<div class='day-17'></div>
<div class='day-18'></div>
<div class='day-19'></div>
<div class='day-20'></div>
<div class='day-21'></div>
<div class='day-22'></div>
<div class='day-23'></div>
<div class='day-24'></div>
</section>А потом поправить в стиле (t - это место для title, то есть для картинки):
grid-template-areas: "t t t"
"d23 d20 d12"
"d2 d14 d4"
"d5 d22 d16"
"d1 d7 d9"
"d10 d11 d18"
"d13 d3 d15"
"d6 d17 d8"
"d19 d24 d21";@media only screen and (min-width: 500px) {
.grid-1 {
grid-template-columns: repeat(6, 1fr);
grid-template-areas: "t t t d2 d7 d8"
"t t t d4 d11 d12"
"t t t d19 d9 d13"
"d6 d1 d24 d24 d21 d20"
"d17 d18 d24 d24 d5 d22"
"d3 d23 d16 d14 d10 d15";
}
}/* картинки для событий */
.title {
grid-area: t;
}
.day-1 {
grid-area: d1;
}
.day-1 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … /child.svg);
}
.day-2 {
grid-area: d2;
}
.day-2 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … /donut.svg);
}
.day-3 {
grid-area: d3;
}
.day-3 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … /santa.svg);
}
.day-4 {
grid-area: d4;
}
.day-4 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … hild-3.svg);
}
.day-5 {
grid-area: d5;
}
.day-5 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … 4/book.svg);
}
.day-6 {
grid-area: d6;
}
.day-6 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … wflake.svg);
}
.day-7 {
grid-area: d7;
}
.day-7 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … 4/gift.svg);
}
.day-8 {
grid-area: d8;
}
.day-8 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … ocking.svg);
}
.day-9 {
grid-area: d9;
}
.day-9 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … 4/gift.svg);
}
.day-10 {
grid-area: d10;
}
.day-10 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … 4/bird.svg);
}
.day-11 {
grid-area: d11;
}
.day-11 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … nowman.svg);
}
.day-12 {
grid-area: d12;
}
.day-12 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … hild-2.svg);
}
.day-13 {
grid-area: d13;
}
.day-13 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … /holly.svg);
}
.day-14 {
grid-area: d14;
}
.day-14 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … /horse.svg);
}
.day-15 {
grid-area: d15;
}
.day-15 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … 4/book.svg);
}
.day-16 {
grid-area: d16;
}
.day-16 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … 4/bird.svg);
}
.day-17 {
grid-area: d17;
}
.day-17 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … ocking.svg);
}
.day-18 {
grid-area: d18;
}
.day-18 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … /donut.svg);
}
.day-19 {
grid-area: d19;
}
.day-19 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … /child.svg);
}
.day-20 {
grid-area: d20;
}
.day-20 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … /holly.svg);
}
.day-21 {
grid-area: d21;
}
.day-21 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … lake-2.svg);
}
.day-22 {
grid-area: d22;
}
.day-22 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … /santa.svg);
}
.day-23 {
grid-area: d23;
}
.day-23 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … hild-2.svg);
}
.day-24 {
grid-area: d24;
}
.day-24 .back {
background: url(https://s3-us-west-2.amazonaws.com/s.cd … 4/tree.svg);
}В последнем куске процитированного кода можно подставить свои картинки, которые будут появляться при нажатии на цифры.
Если хотите чтобы задание\событие на переворачивающейся табличке было текстом, меняем:
Вот это
На это
.day-24 .back { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/tree.svg); }.day-24 .back:after { content: "Выпить молока"; /*текст события*/ }И так с каждым днём, где нужен текст. Чтобы надпись была по центру:
.door .back {
background-size: contain;
background-position: center center; /*положение картинки*/
background-repeat: no-repeat;
background-color: #2e313d; /*цвет фона*/
transform: rotateY(180deg);
text-align: center;
}Добавляем выделенное красным в указанный кусок кода.
КАЛЕНДАРЬ СОБЫТИЙ ДЛЯ КИНОМАРАФОНА
Позволяет добавить и стилизовать календарь событий на Новый год (Рождество). Календарь работает таким образом что для каждого дня можно добавить фильм, песню или видеоролик. Код адаптивный и подстраивается под размер экрана.
# увеличивается по клику
Автор скрипта: Kit Jenson. Перевод специально для forumd.ru.
Администраторы форумов mybb&Co могут ставить себе такое на админ-страницы: Администрирование - Страницы. Проверено, там работает!
Большая часть календаря написана на css и при желании можно переделать внешний вид дома на свой вкус.
CSSСтавить либо туда где стоят стили сайта или фрорума, либо рядом с html частью, но тогда код надо обернуть в теги <style>тут ваш цсс код</style>
HTMLJSСкрипт ставим ниже хтмл-части и стиля, иначе ничего работать не будет.
Как изменить количество дней?
Сейчас в скрипте прописано максимальное количество дней в месяце - 31. То есть, если страницу посещает участник 5 декабря, то окна предыдущего дня открыты, то есть просмотрены. Если вы хотите уменьшить количество дней марафона, меняем в трёх местах.Во-первых, в хтмл-части удаляем лишние дни:
thirtyone={
title: "Silent Night",
video_id: "sMvURdq8V6U",
blurb: "Composed in 1818 by Franz Xaver Gruber to lyrics by Joseph Mohr in the small town of Oberndorf bei Salzburg, Austria. It was declared an intangible cultural heritage by UNESCO in 2011. The song has been recorded by a large number of singers from every music genre. The version sung by Bing Crosby is the third best-selling single of all-time.",
icon: "https://media2.giphy.com/media/oUM2k2cif7jSE/giphy.gif?cid=ecf05e479bm6bnknt8h4zas8h41hyi06l82jm87hpu1cg2dn&rid=giphy.gif",
},Во-вторых, в скрипте правим два куска:
var block_count = 31
Красным меняем на желаемое количество дней.
if(n > 30) {
n = 30Зелёное меняем на количество дней марафона -1 день.
