← All posts

Tutorials

Booksy tweaks: a clearer calendar and a focus mode

18 May 2026 · by JustZix Team

Booksy is a handy booking tool, but the business dashboard can be dense with elements: promotions, notifications, suggestions, colourful banners. When you run a salon, you mostly want to see the calendar and today's appointments. This guide shows how to reshape booksy.com with JustZix so the dashboard and calendar view are clear and calm — a handful of CSS and JS rules pinned to the domain.

Why reshape Booksy

The Booksy dashboard handles many scenarios at once: bookings, marketing, statistics, notifications. That is good for the platform, but day-to-day salon work usually comes down to one question: "who is coming in today and at what time". JustZix does not change how Booksy works — it layers your CSS and JS rules onto the page every time you open it. The rules apply only to you, only on booksy.com, and you toggle them with a single click.

Declutter the booking UI

The Booksy panel often surrounds the calendar with marketing banners and suggestion tiles. The simplest fix is a CSS rule matched against the container attributes:

/* Hide marketing banners and suggestion tiles */
div[class*="promo-banner"],
div[class*="MarketingBanner"],
section[data-testid*="suggestions"],
div[class*="upsell"] {
  display: none !important;
}

Booksy renders some blocks only after the data loads, so it is worth adding a JS rule that also cleans the panel as content is appended:

// Remove promo blocks, including after lazy-load
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,
});

A denser calendar

The default Booksy calendar view leaves plenty of empty space in the time cells. If you have many appointments per day, you can shrink the row height and spacing to fit a whole day without scrolling:

/* Compact calendar — the whole day on screen */
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;
}

Highlight today and unconfirmed appointments

A quick glance at the schedule makes it easy to miss appointments waiting for confirmation. Instead of scanning for them, highlight them with a coloured outline using a JS rule:

// Highlight unconfirmed appointments
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';
  }
});

// Mark the "today" column more strongly
const today = document.querySelector('[data-today="true"], div[class*="column--today"]');
if (today) today.style.background = 'rgba(46,125,50,0.08)';

Now you can see at a glance which appointments need a response and where today sits in the schedule.

Hide promos and notifications

The Booksy top bar often shows banners offering premium features and marketing notification bubbles. If they distract you while you work, you can hide them entirely:

/* Hide marketing notifications and premium badges */
div[data-testid*="notification-marketing"],
div[class*="PremiumBadge"],
div[class*="feature-promo"] {
  display: none !important;
}

A focus mode for the customer view

If you book an appointment as a customer, the salon page can also be dense: photo carousels, recommendation sections, repeated buttons. A focus mode leaves just the service list and the calendar of available slots:

/* Focus mode — just services and slots */
section[class*="gallery-carousel"],
section[class*="recommended-venues"],
div[class*="sticky-promo"] {
  display: none !important;
}
/* Bring the service list forward */
div[class*="services-list"] {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

Build your own set

Keep these tweaks as separate, named rules — "Booksy: clean panel", "Booksy: dense calendar", "Booksy: focus mode" — each pinned to booksy.com. Then in a few seconds you fit the view to whatever you are doing.

Ready-made rules for Booksy are in the catalog — see the examples for booksy.com and copy whatever fits. Install JustZix and tidy up your dashboard today.