URL скопирован в буфер обмена!
Как сделать интеравктивный адвент-календарь в Zero Block на Tilda?
С помощью этой модификации в Zero Block можно создать адвент-календарь с запуском в заданную дату. После старта пользователям будет открываться по одной награде в день. Дополнительно можно отключать доступ к наградам предыдущих дней и отображать заглушку для тех, которые ещё не наступили.
Модификация не работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Дата старта
Количество дней
Ссылка на popup заглушку
Серый фильтр для прошедших дат
Подарки за прошедшие дни
Ссылка на popup заглушку прошедших дат
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD132--><script>
document.addEventListener("DOMContentLoaded", function () {
const TCDtotalDays = 7;
const TCDstartAdvent = new Date("2025-05-13");
const TCDpastlinks = true;
const TCDnewadventAdte = new Date();
TCDnewadventAdte.setHours(0, 0, 0, 0);
TCDstartAdvent.setHours(0, 0, 0, 0);
let dayDiff = 0;
if (TCDnewadventAdte >= TCDstartAdvent) {
dayDiff = Math.floor((TCDnewadventAdte - TCDstartAdvent) / (1000 * 60 * 60 * 24)) + 1;
}
for (let i = 1; i <= TCDtotalDays; i++) {
const TiCodetildaAdvent = document.querySelector(`a[href="#d${i}"]`);
if (TiCodetildaAdvent) {
if (TCDpastlinks && i <= dayDiff) {
TiCodetildaAdvent.classList.remove("inactive");
TiCodetildaAdvent.classList.add("active");
TiCodetildaAdvent.removeAttribute("disabled");
TiCodetildaAdvent.style.pointerEvents = "auto";
TiCodetildaAdvent.style.opacity = "1";
} else if (!TCDpastlinks && i < dayDiff) {
TiCodetildaAdvent.classList.remove("inactive");
TiCodetildaAdvent.classList.add("active");
TiCodetildaAdvent.removeAttribute("disabled");
TiCodetildaAdvent.style.pointerEvents = "auto";
TiCodetildaAdvent.style.opacity = "1";
TiCodetildaAdvent.setAttribute("href", "#ti-end2");
} else if (!TCDpastlinks && i === dayDiff) {
TiCodetildaAdvent.classList.remove("inactive");
TiCodetildaAdvent.classList.add("active");
TiCodetildaAdvent.removeAttribute("disabled");
TiCodetildaAdvent.style.pointerEvents = "auto";
TiCodetildaAdvent.style.opacity = "1";
} else {
TiCodetildaAdvent.classList.remove("active");
TiCodetildaAdvent.classList.add("inactive");
TiCodetildaAdvent.setAttribute("disabled", "true");
TiCodetildaAdvent.style.pointerEvents = "auto";
TiCodetildaAdvent.style.opacity = "1";
TiCodetildaAdvent.setAttribute("href", "#ti-end");
}
}
}
});
</script>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
1. В Zero Block создаем нужное количество кнопок — по одной на каждый день календаря. Каждой кнопке присваиваем ссылку в формате #d1, #d2, #d3 и т. д. Например, если календарь рассчитан на 7 дней (подарков), нужно создать 7 кнопок со ссылками от #d1 до #d7.
2. Для каждой кнопки создаём отдельный попап. Можно использовать стандартные блоки с попапами или блок T1093 для создания попапов в Zero Block. В каждом попапе также прописываем соответствующую якорную ссылку — #d1, #d2 и т. д., чтобы они открывались при клике на кнопки.
3. Генераторе кода заполняем поля:
Дата старта — день, с которого должен начаться календарь. В этот день откроется первая кнопка;
Количество дней — указываем столько, сколько кнопок вы создали (например 7);
Ссылка на попап-заглушку — это попап, который будет показываться при попытке нажать на будущие дни (те, которые ещё не наступили);
Серый фильтр для прошедших дат — если включено, то кнопки прошедших дат будет заливать серым цветом;
Подарки за прошедшие дни — если включено — пользователь сможет получить подарки за предыдущие дни. Если выключено — при клике на прошедшие дни будет показываться попап-заглушка (можно создать отдельный попап-заглушку для этого случая).
4. Копируем код и вставляем HTML блок T123. Блок Т123 размещаем под зеро блоком с шейпами
2. Для каждой кнопки создаём отдельный попап. Можно использовать стандартные блоки с попапами или блок T1093 для создания попапов в Zero Block. В каждом попапе также прописываем соответствующую якорную ссылку — #d1, #d2 и т. д., чтобы они открывались при клике на кнопки.
3. Генераторе кода заполняем поля:
Дата старта — день, с которого должен начаться календарь. В этот день откроется первая кнопка;
Количество дней — указываем столько, сколько кнопок вы создали (например 7);
Ссылка на попап-заглушку — это попап, который будет показываться при попытке нажать на будущие дни (те, которые ещё не наступили);
Серый фильтр для прошедших дат — если включено, то кнопки прошедших дат будет заливать серым цветом;
Подарки за прошедшие дни — если включено — пользователь сможет получить подарки за предыдущие дни. Если выключено — при клике на прошедшие дни будет показываться попап-заглушка (можно создать отдельный попап-заглушку для этого случая).
4. Копируем код и вставляем HTML блок T123. Блок Т123 размещаем под зеро блоком с шейпами
