Как настроить прокрутку к календарю FluentBooking после выбора услуги

На странице сайта с формой FluentBooking после нажатия на карточку услуги пользователь переходит к этапу выбора даты. По умолчанию страница может «отскакивать» к верхней части формы — фотографии и информации о ведущем.

Этот сниппет исправляет поведение:

• на телефоне прокручивает страницу к заголовку месяца, например «Июль 2026»;
• на компьютере оставляет сверху 80 px воздуха, чтобы календарь не прятался под верхней панелью;
• работает в Safari, Chrome и других браузерах;
• срабатывает только внутри FluentBooking.

Куда вставлять код

Откройте в WordPress: WPCodeBox2 → Snippets → ваш сниппет Удалите из него прежний код прокрутки и вставьте код ниже целиком. Важно: в WPCodeBox2 не нужно добавлять <?php в начале и ?> в конце — иначе плагин может отключить сниппет с ошибкой.

Итоговый код

add_action( 'wp_enqueue_scripts', function () {

    wp_enqueue_script( 'jquery' );

    $script = <<<'JAVASCRIPT'
(function () {
    'use strict';

    // Находит заголовок открытого месяца календаря:
    // например, «Июль 2026».
    function getMonthHeading() {
        var wrapper = document.querySelector('.fcal_calendar_wrapper');

        if (!wrapper) {
            return null;
        }

        var monthPattern = /^(январь|февраль|март|апрель|май|июнь|июль|август|сентябрь|октябрь|ноябрь|декабрь|january|february|march|april|may|june|july|august|september|october|november|december)\s+\d{4}$/i;

        return Array.from(wrapper.querySelectorAll('*')).find(function (element) {
            var text = element.textContent.replace(/\s+/g, ' ').trim();
            var rect = element.getBoundingClientRect();

            return monthPattern.test(text) && rect.height > 0 && rect.height < 100;
        });
    }

    // Прокручивает страницу к заголовку месяца.
    function scrollToCalendarMonth() {
        var month = getMonthHeading();

        if (!month) {
            return;
        }

        // Телефон: календарь начинается почти от верхнего края.
        // Компьютер: оставляем сверху 80 px воздуха.
        var topOffset = window.matchMedia('(min-width: 768px)').matches ? 80 : 16;

        var targetY = window.pageYOffset + month.getBoundingClientRect().top - topOffset;

        try {
            window.scrollTo({
                top: Math.max(0, targetY),
                behavior: 'smooth'
            });
        } catch (error) {
            // Резервный вариант для старых браузеров.
            window.scrollTo(0, Math.max(0, targetY));
        }
    }

    document.addEventListener('click', function (event) {
        var card = event.target.closest('.fcal_calendar_wrapper .fcal_event_card');

        if (!card) {
            return;
        }

        // У карточки FluentBooking может быть пустая ссылка.
        // Не позволяем ей вернуть страницу наверх.
        event.preventDefault();

        // Ждём, пока FluentBooking отрисует календарь,
        // затем прокручиваем к месяцу.
        [150, 450, 900, 1500, 2200].forEach(function (delay) {
            setTimeout(scrollToCalendarMonth, delay);
        });

    }, true);

})();
JAVASCRIPT;

    wp_add_inline_script( 'jquery', $script, 'after' );

}, 999 );

Почему используется несколько задержек

FluentBooking открывает карточку услуги и календарь не одномоментно: часть элементов появляется с задержкой. Поэтому код несколько раз проверяет, появился ли заголовок месяца, и только затем плавно переводит пользователя к календарю. Это также помогает в Safari, где страница иногда завершает свою внутреннюю прокрутку чуть позже.

Как проверить

1. Сохраните и включите сниппет.
2. Очистите кэш сайта, если используется кэш-плагин.
3. Откройте страницу бронирования в приватной вкладке.
4. Нажмите «Забронировать сейчас».

На телефоне вверху должен появиться заголовок месяца — «Июль 2026» или текущий доступный месяц. На компьютере над календарём останется около 80 px свободного пространства.