Дата, время, график работы

Модификация позволяет разместить на странице текущую дату, время, а также вывести статус работы на данный момент
Инструкция по настройке
Шаблон страницы
Как добавить шаблон
64146477
Для корректной работы модификаций подключите библиотеку jQuery:
Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
jQuery
1 шаг
  1. Создаём shape для иконки статуса и задаем ему класс .worktimeico
  2. Создаем текстовый элемент для статуса и задаем ему класс .worktime
  3. Создаем текстовый элемент для времени и задаем ему класс .time
  4. Создаем текстовый элемент для дня недели и задаем ему класс .day
  5. Создаем текстовый элемент для даты (число и месяц) и задаем ему класс .date
Добавляем Zero блок
2 шаг
Добавляем блок T123 и копируем в него код
Скопировать код
3 шаг
  1. В массиве const schedule вводим рабочее время по дням недели
  2. На 41 строке пишем текст, который выводится в рабочее время
  3. На 46 строке, вместо WE ARE OPENING пишем текст, который выводится в нерабочее время
Настраиваем вывод статусов в коде
<script>
document.addEventListener("DOMContentLoaded", function () {
    const GMT_OFFSET = 3; // Смещение времени в часах (Москва = 3)
    
    // Русская система: 1 = понедельник, 7 = воскресенье
    const schedule = {
        1: { start: "07:00", end: "16:00", name: "MONDAY" },
        2: { start: "07:00", end: "16:00", name: "TUESDAY" },
        3: { start: "07:00", end: "16:00", name: "WEDNESDAY" },
        4: { start: "07:00", end: "16:00", name: "THURSDAY" },
        5: { start: "07:00", end: "16:00", name: "FRIDAY" },
        6: { start: "07:00", end: "12:00", name: "SATURDAY" },
        7: { start: "07:00", end: "12:00", name: "SUNDAY" }
    };

    function parseTime(timeStr) {
        let [hours, minutes] = timeStr.split(":").map(Number);
        return hours * 60 + minutes;
    }

    function getNextWorkingDay(today) {
        // Поиск следующего рабочего дня в русской системе (1-7)
        for (let i = 1; i <= 7; i++) {
            let nextDay = today + i;
            if (nextDay > 7) nextDay = nextDay - 7; // Круговой переход
            if (schedule[nextDay]) return nextDay;
        }
        return null;
    }

    function getCurrentDateTimeWithOffset() {
        let nowUTC = new Date();
        // Добавляем смещение для получения московского времени
        return new Date(nowUTC.getTime() + GMT_OFFSET * 60 * 60 * 1000);
    }

    function updateWorkStatus() {
        let nowLocal = getCurrentDateTimeWithOffset();
        
        // Конвертируем из JavaScript (0=воскресенье, 1=понедельник) в русскую систему (1=понедельник, 7=воскресенье)
        let jsDay = nowLocal.getUTCDay(); // JavaScript: 0-6
        let russianDay;
        
        // JavaScript: 0=воскресенье, 1=понедельник, 2=вторник, 3=среда, 4=четверг, 5=пятница, 6=суббота
        // Русская система: 1=понедельник, 2=вторник, 3=среда, 4=четверг, 5=пятница, 6=суббота, 7=воскресенье
        
        if (jsDay === 0) {
            russianDay = 7; // Воскресенье
        } else {
            russianDay = jsDay; // Понедельник=1, Вторник=2, ..., Суббота=6
        }
        
        let minutesNow = nowLocal.getUTCHours() * 60 + nowLocal.getUTCMinutes();
        let worktimeico = document.querySelector(".worktimeico .tn-atom");
        let worktimeText = document.querySelector(".worktime .tn-atom");

        console.log(`JavaScript день: ${jsDay}, Русский день: ${russianDay}`);
        console.log(`Московское время: ${nowLocal.getUTCHours()}:${nowLocal.getUTCMinutes()}`);

        if (schedule[russianDay] && minutesNow >= parseTime(schedule[russianDay].start) && minutesNow <= parseTime(schedule[russianDay].end)) {
            worktimeText.textContent = "AVAILABLE NOW";
            if (worktimeico) worktimeico.style.backgroundColor = "";
        } else {
            let nextWorkDay = getNextWorkingDay(russianDay);
            if (nextWorkDay !== null && schedule[nextWorkDay]) {
                let startHour = schedule[nextWorkDay].start;
                worktimeText.textContent = `WE ARE OPENING ${schedule[nextWorkDay].name} ${startHour} - ${schedule[nextWorkDay].end}`;
            }
            if (worktimeico) worktimeico.style.setProperty("background-color", "#FF0A0A", "important");
        }
    }

    function updateDateTime() {
        let nowLocal = getCurrentDateTimeWithOffset();
        
        var timeElement = document.querySelector('.time .tn-atom');
        var dayElement = document.querySelector('.day .tn-atom');
        var dateElement = document.querySelector('.date .tn-atom');
        
        if (!timeElement || !dayElement || !dateElement) return;
        
        var hours = nowLocal.getUTCHours();
        var minutes = nowLocal.getUTCMinutes();

        var timeString = ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2);

        // Определяем день недели для отображения
        let jsDay = nowLocal.getUTCDay();
        let dayName;
        switch(jsDay) {
            case 0: dayName = "SUNDAY"; break;
            case 1: dayName = "MONDAY"; break;
            case 2: dayName = "TUESDAY"; break;
            case 3: dayName = "WEDNESDAY"; break;
            case 4: dayName = "THURSDAY"; break;
            case 5: dayName = "FRIDAY"; break;
            case 6: dayName = "SATURDAY"; break;
            default: dayName = "";
        }

        // Месяцы на английском
        var months = ['JANUARY', 'FEBRUARY', 'MARCH', 'APRIL', 'MAY', 'JUNE', 
                     'JULY', 'AUGUST', 'SEPTEMBER', 'OCTOBER', 'NOVEMBER', 'DECEMBER'];
        var month = months[nowLocal.getUTCMonth()];

        // Число месяца
        var date = nowLocal.getUTCDate();

        // Формируем строку для вывода даты
        var dateString = date + ' ' + month;

        // Обновляем содержимое элементов
        timeElement.textContent = timeString;
        dayElement.textContent = dayName;
        dateElement.textContent = dateString;
    }

    // Инициализация
    updateWorkStatus();
    updateDateTime();
    
    // Запускаем обновление
    setInterval(updateWorkStatus, 60000);
    setInterval(updateDateTime, 1000);
});
</script>
Больше модификаций доступно по подписке
Полный доступ к 70+ модификациям
Обновления библиотеки
Оповещения о новых модификациях в канале
Техподдержка в чате
Поддержка модов при изменениях в Tilda
Модуль подарочные карты тариф Lite на месяц
Доступ к ИИ-боту @tistolsaibot на год
Помощь в доработке модификации
Поддержка модов при изменениях в Tilda
Техподдержка в чате
Модуль smsmod.ru на год
Сертификат на разработку 3 модификаций
Модуль подарочные карты тариф Pro на месяц
Оповещения о новых модификациях в канале
Обновления библиотеки
Полный доступ к 70+ модификациям
Оповещения о новых модификациях в канале
Обновления библиотеки
Полный доступ к 15+ модификациям
  • Открытый код и текстовые инструкции
  • Пошаговые видеоинструкции
  • Готовые шаблоны (страницы)
Free
0 руб.
Месяц
Год
Pro
3 000 руб.
-50%
Club
18 000 руб.
-40%
Месяц
Год
  • Открытый код и текстовые инструкции
  • Пошаговые видеоинструкции
  • Готовые шаблоны (страницы)
  • Модификации будут работать в проектах после истечения подписки
  • Открытый код и текстовые инструкции
  • Пошаговые видеоинструкции
  • Готовые шаблоны (страницы)
  • Модификации будут работать в проектах после истечения подписки
Полный доступ к 70+ модификациям
Обновления библиотеки
Оповещения о новых модификациях в канале
Техподдержка в чате
Поддержка модов при изменениях в Tilda
Модуль подарочные карты тариф Lite на месяц
Помощь в доработке модификации
Поддержка модов при изменениях в Tilda
Техподдержка в чате
Модуль smsmod.ru на месяц
Сертификат на разработку 1 модификаций
Модуль подарочные карты тариф Lite на месяц
Оповещения о новых модификациях в канале
Обновления библиотеки
Полный доступ к 70+ модификациям
Оповещения о новых модификациях в канале
Обновления библиотеки
Полный доступ к 15+ модификациям
  • Открытый код и текстовые инструкции
  • Пошаговые видеоинструкции
  • Готовые шаблоны (страницы)
Free
0 руб.
Месяц
Год
Pro
500 руб.
Club
2 500 руб.
Месяц
Год
  • Открытый код и текстовые инструкции
  • Пошаговые видеоинструкции
  • Готовые шаблоны (страницы)
  • Модификации будут работать в проектах после истечения подписки
  • Открытый код и текстовые инструкции
  • Пошаговые видеоинструкции
  • Готовые шаблоны (страницы)
  • Модификации будут работать в проектах после истечения подписки
Доступ к ИИ-боту @tistolsaibot на месяц
Вам также может быть интересно: