Where styling is set
Open the app and go to Appearance. What you set there applies to every calendar on your store, so you only do it once. The preview beside the settings shows the result straight away.
What you can change
- Layout. How shoppers pick a time: Day and time, a Time grid, or Day cards. Day and time is the default and works on every screen size.
- Theme. A light or dark calendar. Leave individual colours blank to follow the theme, or set one to override it.
- Colours. The accent colour, the column headers, and the colours for available, selected and unavailable times.
- Book button. The button colours, its hover state, border and corners.
- Time and density. 12 or 24 hour times, comfortable or compact spacing, and a font size that suits your theme.
- Corners. Rounded corners set separately for time slots, day cards, price pills, the button and the headers.
- Custom CSS. For anything else, add your own rules. Developers can also style from the theme by targeting the booking-calendar classes.
Good to know
Can my developer style it from the theme?
Yes. The calendar renders in normal HTML with no shadow DOM, so theme CSS can target its classes and CSS variables directly.
Do styles apply to every calendar?
Yes. Appearance is set once in the app and applies across your store.