← Alle Beiträge

Anleitungen

Booksy-Anpassungen: ein klarerer Kalender und ein Fokusmodus

18 Mai 2026 · von JustZix Team

Booksy ist ein praktisches Buchungswerkzeug, aber das Geschäfts-Dashboard kann dicht mit Elementen sein: Werbeaktionen, Benachrichtigungen, Vorschläge, bunte Banner. Wenn Sie einen Salon führen, wollen Sie vor allem den Kalender und die heutigen Termine sehen. Diese Anleitung zeigt, wie Sie booksy.com mit JustZix umgestalten, sodass das Dashboard und die Kalenderansicht klar und ruhig sind — eine Handvoll CSS- und JS-Regeln, die an die Domain angeheftet sind.

Warum Booksy umgestalten

Das Booksy-Dashboard bewältigt viele Szenarien auf einmal: Buchungen, Marketing, Statistiken, Benachrichtigungen. Das ist gut für die Plattform, aber die tägliche Salonarbeit läuft meist auf eine Frage hinaus: „Wer kommt heute und um wie viel Uhr“. JustZix ändert nicht, wie Booksy funktioniert — es legt Ihre CSS- und JS-Regeln jedes Mal über die Seite, wenn Sie sie öffnen. Die Regeln gelten nur für Sie, nur auf booksy.com, und Sie schalten sie mit einem einzigen Klick um.

Die Buchungs-UI entrümpeln

Das Booksy-Panel umgibt den Kalender oft mit Marketing-Bannern und Vorschlagskacheln. Der einfachste Fix ist eine CSS-Regel, die gegen die Container-Attribute abgeglichen wird:

/* Marketing-Banner und Vorschlagskacheln ausblenden */
div[class*="promo-banner"],
div[class*="MarketingBanner"],
section[data-testid*="suggestions"],
div[class*="upsell"] {
  display: none !important;
}

Booksy rendert einige Blöcke erst, nachdem die Daten geladen sind, also lohnt es sich, eine JS-Regel hinzuzufügen, die das Panel auch beim Anhängen von Inhalten aufräumt:

// Promo-Blöcke entfernen, auch nach dem Nachladen
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,
});

Ein dichterer Kalender

Die Standard-Kalenderansicht von Booksy lässt reichlich leeren Raum in den Zeitzellen. Wenn Sie viele Termine pro Tag haben, können Sie die Zeilenhöhe und die Abstände verkleinern, um einen ganzen Tag ohne Scrollen unterzubringen:

/* Kompakter Kalender — der ganze Tag auf dem Bildschirm */
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;
}

Heutige und unbestätigte Termine hervorheben

Ein kurzer Blick auf den Terminplan macht es leicht, auf Bestätigung wartende Termine zu übersehen. Statt nach ihnen zu suchen, heben Sie sie mit einer JS-Regel mit einer farbigen Umrandung hervor:

// Unbestätigte Termine hervorheben
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';
  }
});

// Die "heute"-Spalte stärker markieren
const today = document.querySelector('[data-today="true"], div[class*="column--today"]');
if (today) today.style.background = 'rgba(46,125,50,0.08)';

Jetzt sehen Sie auf einen Blick, welche Termine eine Reaktion brauchen und wo der heutige Tag im Terminplan sitzt.

Promos und Benachrichtigungen ausblenden

Die obere Leiste von Booksy zeigt oft Banner, die Premium-Funktionen anbieten, und Marketing-Benachrichtigungsblasen. Wenn sie Sie bei der Arbeit ablenken, können Sie sie vollständig ausblenden:

/* Marketing-Benachrichtigungen und Premium-Badges ausblenden */
div[data-testid*="notification-marketing"],
div[class*="PremiumBadge"],
div[class*="feature-promo"] {
  display: none !important;
}

Ein Fokusmodus für die Kundenansicht

Wenn Sie als Kunde einen Termin buchen, kann auch die Salonseite dicht sein: Foto-Karussells, Empfehlungsabschnitte, wiederholte Schaltflächen. Ein Fokusmodus lässt nur die Dienstleistungsliste und den Kalender der verfügbaren Termine:

/* Fokusmodus — nur Dienstleistungen und Termine */
section[class*="gallery-carousel"],
section[class*="recommended-venues"],
div[class*="sticky-promo"] {
  display: none !important;
}
/* Die Dienstleistungsliste in den Vordergrund holen */
div[class*="services-list"] {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

Bauen Sie Ihr eigenes Set

Behalten Sie diese Anpassungen als separate, benannte Regeln — „Booksy: sauberes Panel“, „Booksy: dichter Kalender“, „Booksy: Fokusmodus“ — jede an booksy.com angeheftet. Dann passen Sie die Ansicht in wenigen Sekunden an das an, was Sie gerade tun.

Fertige Regeln für Booksy sind im Katalog — sehen Sie sich die Beispiele für booksy.com an und kopieren Sie, was passt. Installieren Sie JustZix und räumen Sie Ihr Dashboard noch heute auf.