← Wszystkie wpisy

Poradniki

Poprawki Booksy: czytelniejszy kalendarz i tryb skupienia

18 maja 2026 · autor JustZix Team

Booksy to wygodne narzędzie do rezerwacji, ale panel firmowy potrafi być gęsty od elementów: promocje, powiadomienia, sugestie, kolorowe banery. Gdy prowadzisz salon, chcesz widzieć przede wszystkim kalendarz i dzisiejsze wizyty. W tym poradniku pokazuję, jak za pomocą JustZix przerobić booksy.com tak, by panel i widok kalendarza były czytelne i spokojne — kilka reguł CSS i JS przypiętych do domeny.

Dlaczego warto przerobić Booksy

Pulpit Booksy obsługuje wiele scenariuszy naraz: rezerwacje, marketing, statystyki, powiadomienia. To dobre dla platformy, ale codzienna praca w salonie sprowadza się zwykle do jednego: „kto i o której dziś przychodzi”. JustZix nie zmienia działania Booksy — nakłada Twoje reguły CSS i JS na stronę przy każdym otwarciu. Reguły działają tylko u Ciebie, wyłącznie na booksy.com i włączasz je jednym kliknięciem.

Odchudź interfejs rezerwacji

Panel Booksy często otacza kalendarz banerami marketingowymi i kafelkami z sugestiami. Najprościej ukryć je regułą CSS dopasowaną do atrybutów kontenerów:

/* Ukryj banery marketingowe i kafelki sugestii */
div[class*="promo-banner"],
div[class*="MarketingBanner"],
section[data-testid*="suggestions"],
div[class*="upsell"] {
  display: none !important;
}

Booksy renderuje część bloków dopiero po wczytaniu danych, dlatego warto dołożyć regułę JS, która sprząta panel także po doładowaniu treści:

// Usuń bloki promocyjne także po doładowaniu
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,
});

Gęstszy kalendarz

Domyślny widok kalendarza Booksy zostawia sporo pustej przestrzeni w komórkach godzin. Jeśli masz wiele wizyt dziennie, możesz zmniejszyć wysokość wierszy i odstępy, by zmieścić cały dzień bez przewijania:

/* Zwarty kalendarz — cały dzień na ekranie */
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;
}

Wyróżnij dzisiejsze i niepotwierdzone wizyty

Przy szybkim spojrzeniu na grafik łatwo przeoczyć wizyty czekające na potwierdzenie. Zamiast szukać ich wzrokiem, podświetl je regułą JS kolorową ramką:

// Podświetl niepotwierdzone wizyty
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('niepotwierdzona')) {
    card.style.outline = '2px solid #e65100';
    card.style.borderRadius = '6px';
  }
});

// Mocniej oznacz kolumnę „dzisiaj”
const today = document.querySelector('[data-today="true"], div[class*="column--today"]');
if (today) today.style.background = 'rgba(46,125,50,0.08)';

Dzięki temu od razu widać, które wizyty wymagają reakcji i gdzie w grafiku jest dzisiejszy dzień.

Schowaj promocje i powiadomienia

Górny pasek Booksy często pokazuje banery z ofertami funkcji premium oraz dymki powiadomień marketingowych. Jeśli rozpraszają Cię w trakcie pracy, możesz je całkowicie ukryć:

/* Ukryj powiadomienia marketingowe i odznaki premium */
div[data-testid*="notification-marketing"],
div[class*="PremiumBadge"],
div[class*="feature-promo"] {
  display: none !important;
}

Tryb skupienia dla widoku klienta

Jeśli rezerwujesz wizytę jako klient, strona salonu też potrafi być gęsta: karuzele zdjęć, sekcje rekomendacji, powtarzające się przyciski. Tryb skupienia zostawia samą listę usług i kalendarz dostępnych terminów:

/* Tryb skupienia — tylko usługi i terminy */
section[class*="gallery-carousel"],
section[class*="recommended-venues"],
div[class*="sticky-promo"] {
  display: none !important;
}
/* Wyeksponuj listę usług */
div[class*="services-list"] {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

Zbuduj własny zestaw

Trzymaj te poprawki jako osobne, nazwane reguły — „Booksy: czysty panel”, „Booksy: gęsty kalendarz”, „Booksy: tryb skupienia” — każdą przypiętą do booksy.com. Wtedy w kilka sekund dopasujesz widok do tego, co akurat robisz.

Gotowe reguły dla Booksy znajdziesz w katalogu — zobacz przykłady dla booksy.com i skopiuj to, co pasuje. Zainstaluj JustZix i uporządkuj swój panel już dziś.