← Все статьи

Туториалы

Настройки Booksy: более понятный календарь и режим фокуса

18 мая 2026 · автор JustZix Team

Booksy — удобный инструмент для записи, но бизнес-панель бывает плотно набита элементами: акции, уведомления, предложения, яркие баннеры. Когда вы ведёте салон, вам в основном нужно видеть календарь и сегодняшние визиты. Это руководство показывает, как перекроить booksy.com с JustZix, чтобы панель и вид календаря были понятными и спокойными — горстка правил CSS и JS, привязанных к домену.

Зачем перекраивать Booksy

Панель Booksy обслуживает много сценариев сразу: записи, маркетинг, статистику, уведомления. Для платформы это хорошо, но повседневная работа в салоне обычно сводится к одному вопросу: «кто приходит сегодня и в какое время». JustZix не меняет работу Booksy — он накладывает ваши правила CSS и JS на страницу каждый раз, когда вы её открываете. Правила применяются только к вам, только на booksy.com, и вы переключаете их одним кликом.

Расчистите интерфейс записи

Панель Booksy часто окружает календарь маркетинговыми баннерами и плитками предложений. Самое простое решение — CSS-правило, сопоставленное с атрибутами контейнеров:

/* Скрыть маркетинговые баннеры и плитки предложений */
div[class*="promo-banner"],
div[class*="MarketingBanner"],
section[data-testid*="suggestions"],
div[class*="upsell"] {
  display: none !important;
}

Booksy отрисовывает часть блоков только после загрузки данных, поэтому стоит добавить JS-правило, которое также вычищает панель по мере подгрузки содержимого:

// Удалить промо-блоки, в том числе после ленивой загрузки
function cleanBooksy() {
  document.querySelectorAll('[data-testid], [class]').forEach(el => {
    const id = (el.getAttribute('data-testid') || '') + ' ' + el.className;
    if (/promo|marketing|upsell|cross-sell/i.test(id)) {
      el.style.display = 'none';
    }
  });
}
cleanBooksy();
new MutationObserver(cleanBooksy).observe(document.body, {
  childList: true, subtree: true,
});

Более плотный календарь

Стандартный вид календаря Booksy оставляет немало пустого пространства в ячейках часов. Если у вас много визитов в день, можно уменьшить высоту строк и отступы, чтобы поместить весь день без прокрутки:

/* Компактный календарь — весь день на экране */
div[class*="calendar-row"],
div[class*="TimeSlot"] {
  min-height: 28px !important;
  padding: 2px 6px !important;
}
div[class*="appointment-card"] {
  font-size: 12px !important;
  line-height: 1.3 !important;
}

Подсветите сегодняшние и неподтверждённые визиты

При быстром взгляде на расписание легко не заметить визиты, ожидающие подтверждения. Вместо того чтобы искать их взглядом, подсветите их цветной рамкой с помощью JS-правила:

// Подсветить неподтверждённые визиты
document.querySelectorAll('div[class*="appointment-card"]').forEach(card => {
  const status = (card.getAttribute('data-status') || '').toLowerCase();
  const txt = (card.textContent || '').toLowerCase();
  if (status.includes('pending') || txt.includes('unconfirmed')) {
    card.style.outline = '2px solid #e65100';
    card.style.borderRadius = '6px';
  }
});

// Сильнее отметить колонку «сегодня»
const today = document.querySelector('[data-today="true"], div[class*="column--today"]');
if (today) today.style.background = 'rgba(46,125,50,0.08)';

Теперь с первого взгляда видно, какие визиты требуют реакции и где в расписании находится сегодняшний день.

Скройте промо и уведомления

Верхняя полоса Booksy часто показывает баннеры с предложениями премиум-функций и пузырьки маркетинговых уведомлений. Если они отвлекают вас во время работы, их можно полностью скрыть:

/* Скрыть маркетинговые уведомления и премиум-бейджи */
div[data-testid*="notification-marketing"],
div[class*="PremiumBadge"],
div[class*="feature-promo"] {
  display: none !important;
}

Режим фокуса для вида клиента

Если вы записываетесь на визит как клиент, страница салона тоже бывает плотной: карусели фотографий, разделы рекомендаций, повторяющиеся кнопки. Режим фокуса оставляет только список услуг и календарь доступных слотов:

/* Режим фокуса — только услуги и слоты */
section[class*="gallery-carousel"],
section[class*="recommended-venues"],
div[class*="sticky-promo"] {
  display: none !important;
}
/* Вывести список услуг на первый план */
div[class*="services-list"] {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

Соберите свой набор

Держите эти настройки отдельными именованными правилами — «Booksy: чистая панель», «Booksy: плотный календарь», «Booksy: режим фокуса» — каждое привязано к booksy.com. Тогда за несколько секунд вы подстроите вид под то, что делаете.

Готовые правила для Booksy есть в каталоге — посмотрите примеры для booksy.com и скопируйте то, что подходит. Установите JustZix и наведите порядок на своей панели уже сегодня.