← 全部文章

教程

Booksy 微调:更清晰的日历与专注模式

18 5月 2026 · 作者 JustZix Team

Booksy 是个方便的预约工具,但商家仪表盘可能塞满了元素:促销、通知、建议、彩色横幅。当你经营一家沙龙时,你主要想看到的是日历和今天的预约。本指南展示如何用 JustZix 改造 booksy.com,让仪表盘和日历视图清晰、平静——几条固定到该域名的 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,今天就整理你的仪表盘。