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

Модификация позволяет разместить на странице текущую дату, время, а также вывести статус работы на данный момент
Инструкция по настройке
Шаблон страницы
Как добавить шаблон
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 пишем текст, который выводится в нерабочее время
Настраиваем вывод статусов в коде
<!--TS24 - Модификация для Тильды. Дата, время, график работы https://mod.tistols.com/date -->
<script>
document.addEventListener("DOMContentLoaded", function () {
    const GMT_OFFSET = 3; // Смещение времени в часах (Москва = 3)
    
    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) {
        for (let i = 1; i <= 7; i++) {
            let nextDay = (today + i) % 7;
            if (schedule[nextDay]) return nextDay;
        }
        return null;
    }

    function updateWorkStatus() {
        let nowUTC = new Date();
        let nowLocal = new Date(nowUTC.getTime() + GMT_OFFSET * 60 * 60 * 1000); 
        let day = nowLocal.getUTCDay();
        let minutesNow = nowLocal.getUTCHours() * 60 + nowLocal.getUTCMinutes();
        let worktimeico = document.querySelector(".worktimeico .tn-atom");
        let worktimeText = document.querySelector(".worktime .tn-atom");

        console.log(`Текущий день (GMT): ${day}`);
        console.log(`Текущее время (GMT): ${nowLocal.getUTCHours()}:${nowLocal.getUTCMinutes()}`);

        if (schedule[day] && minutesNow >= parseTime(schedule[day].start) && minutesNow <= parseTime(schedule[day].end)) {
            worktimeText.textContent = "AVAILABLE NOW"; // Здесь пишем текст, который выводится в рабочее время
            if (worktimeico) worktimeico.style.backgroundColor = "";
        } else {
            let nextWorkDay = getNextWorkingDay(day);
            if (nextWorkDay !== null) {
                let startHour = schedule[nextWorkDay].start;
                worktimeText.textContent = `WE ARE OPENING ${schedule[nextWorkDay].name} ${startHour} - ${schedule[nextWorkDay].end}`; 
                // Вместо WE ARE OPENING пишем текст, который выводится в нерабочее время
            }
            if (worktimeico) worktimeico.style.setProperty("background-color", "#FF0A0A", "important");
        }
    }
    
    updateWorkStatus();
    setInterval(updateWorkStatus, 60000);
});
</script>
<script>
     // Функция для обновления времени, дня недели и даты
    function updateDateTime() {
        var now = new Date();

        var timeElement = document.querySelector('.time .tn-atom');
        var dayElement = document.querySelector('.day .tn-atom');
        var dateElement = document.querySelector('.date .tn-atom');
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();

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

        // Получаем текущий день недели
        var daysOfWeek = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'];
        var dayOfWeek = daysOfWeek[now.getDay()];

        // Получаем текущий месяц
        var months = ['JANUARY', 'FEBRUARY', 'MARCH', 'APRIL', 'MAY', 'JUNE', 'JULY', 'AUGUST', 'SEPTEMBER', 'OKTOBER', 'NOVEMBER', 'DECEMBER'];
        var month = months[now.getMonth()];

        // Получаем число месяца
        var date = now.getDate();

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

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

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