Where appearance is set
Open the app and go to Appearance. Settings here apply to every calendar on your store, so you style once and it is consistent everywhere. A live preview next to the settings updates as you edit.
What you can change
- Layout. Choose how shoppers pick a slot: Day and time, a Time grid, or Day cards. Day and time is the default and works well on every screen size.
- Theme. Pick a light or dark colour theme for the calendar. Light is the default. Leave the pill and header colours blank to follow the theme, or set a colour to override it.
- Colours. Set the accent colour, column header colours, scroll pill colours, and the available, selected and unavailable time-slot colours. Leave slot colours blank to follow your theme.
- Book button. Style the book button, its hover state, border and radius. To book from a different button instead, add the data-booking-book attribute to it and Booker mirrors the Book button onto it.
- Time and density. Choose 12 or 24 hour times, a comfortable or compact density, and a font size that fits your theme.
- Shape. Set the corner radius per element: time slots, day cards, rate pills, the button and the column headers.
- Custom CSS. For anything else, add rules in the Custom CSS field, or style from your theme by targeting the booking-calendar__ classes and the --bc- CSS variables. The calendar renders in light DOM with no shadow DOM.
Good to know
Does the calendar use a shadow DOM?
No. It renders in light DOM, so your theme CSS can target the booking-calendar__ classes and the --bc- CSS variables directly.
Do styles apply to every calendar?
Yes. Appearance is set centrally in the app and applies to every calendar on your store.