Wix Bookings: Customizing Your Calendar Page

8 min read
When clients go to book a class or appointment session, they choose the day and time on the Calendar page. Customize your Calendar page to suit your brand by adjusting the text, layout and what you choose to display.
Screenshot showing booking calendar on a live site.
In this article, learn more about:
Note:
The Booking Calendar page only appears for classes and appointments - not for courses.

Choosing the layout for the Calendar Page

Make sure you choose a clear layout for your calendar page to make it as easy as possible for clients to find the information they need. Choose from a daily or weekly calendar layout and adjust the alignment and spacing of each of the elements. 

To choose the Calendar Page layout:

  1. Access the Booking Calendar page in your editor:
2. Click the Booking Calendar element.
3. Click Settings.
4. Click the Layout tab.
5. Customize the following options:
  • Choose a layout: Choose between a daily or weekly view for your Booking Calendar.
  • Text alignment: Click to set the text blocks to the left, center, or right.
  • Top & bottom padding: Use the slider to control the space above and below the Booking Calendar.
  • Side padding: Use the slider to control the space to the left and right of the Booking Calendar.
  • Space between header & body: Use the slider to control the space between the header and the body.
Screenshot showing to choose the layout of your booking calendar.
Tip:
You can also adjust the layout on mobile by clicking Switch to Mobile at the top of your editor. You can choose from two layout styles: Monthly or Weekly.

Choosing which elements to display on the Calendar Page

The Calendar Page contains several elements that show more information about your services, like the service subtitle or its day and time. You can choose to display certain elements and hide others, depending on your needs. 

To choose which elements to display in the calendar:

  1. Access the Booking Calendar page in your editor:
2.  Click the booking calendar in your editor.
3.  Click Settings.
4.  Click the Display tab.
5.  Choose which elements to display:
  • Header:
    • Select the appropriate checkboxes to show or hide the header Subtitle or Filters below the service title.
    • Choose what text to display under the service title:
      • Custom text: This is set in the Headers & Filters section under the Text tab.
      • Service subtitle: To set the text for this option, go to Manage Services and click on a service.
  • Date & Time: 
    • Select the relevant checkbox to choose between displaying the Current date or the First date with availability
    • Select the relevant checkbox to choose between displaying All time slots, including full & closed slots, or Available time slots only.
    • (Optional) Enable the Limit display of time slots toggle to display fewer time slots. Use the slider to set the number of time slots you display per day.
  • Booking Summary: Enable the Show video conferencing badge toggle for virtual services.  
Screenshot showing how to enable Booking Summary.

Designing the Calendar Page

You can apply your own look and feel to the booking calendar so it fits the overall design of your site. The Booking Calendar page is dynamic, which means you only need to design it once, and it is applied to all services.

To design the Calendar page:

  1. Access the Booking Calendar page in your editor:
2.  Click the Booking Calendar element.
3.  Click Settings
4.  Click the Design tab.
5.  Choose what design you want to customize:
  • Styles: Change the background color of the widget, its header, borders and dividers.
  • Text: Choose the font and color of different text elements across the page.
  • Selections: Design buttons and other elements your clients can click on the page (for example, dates on the calendar).
Screenshot showing how to customize design of your booking calendar.

Editing the text on the Calendar Page

You can edit all text elements on the calendar to suit your business and your clients. Make sure to describe everything in terms your staff and clients understand. 

To edit the text on the Calendar Page:

  1. Access the Booking Calendar page in your editor:
2. Click the Booking Calendar element.
3. Click Settings.
4. Click the Text tab.
5. Choose what text element you want to customize:
  • Header and Filters: Change the text for elements such as the location, staff and duration labels.
  • Date and Time: Customize the text you want to appear explaining your waitlists to clients. 
  • Booking Summary: Edit the text that appears for clients before they proceed to checkout.
  • Book Button: Edit the different buttons that appear on your calendar, including: Book online, Request booking, Waitlist and Reschedule.
Screenshot showing how to edit the text that appears on your booking calendar.
Tips:

Did this help?

|