Wix Bookings: Adding and Setting Up a Single Service Calendar

Add a single service calendar to any page on your site to allow your clients to book even faster. This works well on landing pages for new services or during limited time promotions.

Step 1 | Add a single service calendar

Adding a single service calendar helps your clients book the specific service they need faster. You can add the calendar widget to any page you choose and select the relevant service for that page.

To add a single service calendar:

Wix Editor

Studio Editor

1. Go to your editor.

2. Click Add Elements  on the left side of the editor.

3. Click Bookings.

4. Click Calendar.

5. Drag the calendar widget onto your page.

Step 2 | Select the service you want to display

Now that you have added the single service calendar to the page, you can choose which service you want to display.

To select the service you want to display:

Wix Editor

Studio Editor

1. Click the single service calendar element in your editor.

2. Click Settings.

3. Click Services.

4. Select the checkbox next to the service you want to display.

Step 3 | Customize the layout of your single service calendar

With the service connected to the single service calendar, you can customize the layout, so it suits the page in the background.

To customize the look of the single service calendar:

Wix Editor

Studio Editor

1. Click the single service calendar element in your editor.

2. Click Settings.

3. Click Layout.

4. Choose from a daily or weekly layout.

5. Use the available formatting options to adjust the alignment of the calendar widget text.

6. Use the sliders to adjust the amount of padding between elements in the single service calendar widget.

Step 4 | Choose which elements you want to display

Choose which elements you want to include in the single service calendar, such as the title or location and staff filters.

To choose which elements to display on the single service calendar:

Wix Editor

Studio Editor

1. Click the single service calendar element in your editor.

2. Click Settings.

3. Click Display.

4. Enable the Show header toggle to display a header.

5. Select the checkbox next to each element you want to display in the single service calendar: Title, Subtitle, Location filter and Staff filter.

6. Select the checkbox next to the relevant option for the subtitle:Custom text: Add a custom subtitle in the text tab of the Settings panel.
   Service subtitle: Use the subtitle you added when creating the service.
   

7. Select the relevant checkbox to choose what clients see when they first try to book the service:Current date: Display today's date by default.
   First date with availability: Display the first date with available slots for clients to book.
   

8. Select the relevant checkbox to choose which class time slots you want to display:All time slots, including full & closed slots: Choose this option to display all class sessions.
   Available time slots only: Choose this option to display only classes with available spaces.
   

9. Enable the Limit display of time slots toggle to show only a specific number of available slots on the calendar widget. Select the number of time slots you want to display using the slider.

10. Enable the Show video conferencing badge toggle for online services.

Step 5 | Adjust the design of the single service calendar

With all the relevant elements now displaying in the single service calendar widget, adjust the design so it suits your site properly.

To adjust the design of the single service calendar:

Wix Editor

Studio Editor

1. Click the single service calendar element in your editor.

2. Click Settings.

3. Click Design.

4. Choose what you want to design:

Styles - Backgrounds & borders

You can adjust the color, width and spacing of each of the elements within the single service calendar.

To adjust the backgrounds and border:

1. Click Styles.

2. Customize the color and opacity of your single service calendar background, border and the divider.

Text - Fonts & colors

You can adjust the font, formatting and color of each piece of text throughout the single service calendar.

To adjust the text design in the single service calendar:

1. Click Text.

2. Use the available formatting options to design the text (e.g. color, size, font).
   
   

Selections - Button & interactive elements

Adjust the color for selected and highlighted elements on the single service calendar as well as the date and time and buttons.

To adjust the selection and highlight color:

1. Click Selections.

2. Use the available formatting options to choose the selection & highlight color and the disabled color.

3. Use the sliders to adjust the border width and the corner radius.

To adjust the Date & Time:

1. Click Selections.

2. Click the Date tab and adjust the font, formatting and text color using the available options.

3. Click the Time tab and repeat the step above.

To adjust the button design on the single service calendar:

1. Click Selections.

2. Click the Regular tab and adjust the font, formatting and color of the button text and background using the available options.

3. Click the Hover tab and repeat the step above.

Step 6 | Customize the text content on the single service calendar

Customize any piece of text in the single service calendar to suit your site design. This includes making the text bold, adjusting the size or color, and changing the font.

To customize the text content on the single service calendar:

Wix Editor

Studio Editor

1. Click the single service calendar element in your editor.

2. Click Settings.

3. Click Text.

4. Click to select the relevant section where you want to customize the text content.

5. Enter the custom text content in the relevant fields.