Back to Booking Calendar Guides

This guide applies to:

  • Basic Edition
  • Plus Edition
  • Pro Edition
  • Business Edition

Introduction

Copy these CSS snippets to help with hiding headers, text and icons. Paste them into the Styles Settings > Custom CSS field. 

Find other ways to customize the Booking Calendar in the Style with CSS Snippets guide.

What You Need First

Please see our article on adding custom CSS to Simply Schedule Appointments to help with hiding headers, text and icons.


“What type of appointment are you booking?” Header

Header above the list of Appointment Type

This header appears at the beginning of the Booking Calendar if you have multiple Appointment Type to choose from. Use this CSS to hide the header:

/* Hide the 'What type of appointment are you booking?' header */
.md-title.ssa-type-header {
display: none;
}

Appointment Duration

By default, the Appointment Duration displays under the Appointment Type name and on the Booking Confirmation Screen.

appointment duration shown under appointment type name
Appointment Duration shown under the Appointment Name

Use this CSS to hide the Appointment Duration on the Booking Calendar:

/* Hide the Appointment Duration */
body .appointment-duration {
display: none;
}
Appointment duration removed
Appointment Duration hidden

Note: This CSS doesn’t affect Notification messages. Use the Notification Settings to remove the Appointment Duration from the notifications..

Hide Dash Next to Payment Amount

If you have Payments enabled and have hidden the Appointment duration, your Booking Calendar will look like this:

dash before the payment amount and appointment duration hidden

To get rid of the dash before the payment amount, add this CSS:

/* Hide the dash next to payment amount (used when you're hiding the appointment duration) */
body .divider {
display: none;
}

Appointment Start and End Time

If you’re hiding the Appointment Duration, you may also need to hide the Start and End Time of the appointment on the Booking Form and Confirmation Screen.

start time and end time on booking form

Use this CSS to remove the Start and End Times – You could also use each individually to only remove Start or End Time.

after start and end times are removed on booking calendar

Start Time

/* Hide the start times on the booking form screen */
body .appointment-start-time {
display: none;
}

End Time

/* Hide the end times on the booking form screen */
body .appointment-end-time {
display: none;
}

Note: This CSS doesn’t affect Notification messages. Use the Notification Settings to remove the Start and End time from the notifications..


“What would you like to do next?” on Confirmation Screen

buttons on the confirmation screen
Confirmation screen with all the buttons included

Use this CSS to hide this heading on the confirmation screen:

/* Hide the 'What would you like to do next?' header on the confirmation screen */
.appointment-actions .md-subheading { 
display: none; 
}

Time Categories

Each time slot in the booking calendar get categorized into one of four sections pertaining to the time of day: Night, Morning, Afternoon and Evening.

How the time categories look like by default

Subheadings

Use this CSS to hide those subheadings:

/* Hide the Night, Morning, Afternoon, and Evening subheadings */
‚Äč.md-layout.md-column-center.md-column.md-flex-25.md-flex-xsmall-50 > .md-subheading {
    display: none;
}

If you’d like to change what the subheadings say instead, follow this guide.

After removing the subheadings

Icons

To remove the icons, use this CSS:

/* Hide the Night, Morning, Afternoon, and Evening icons */
.time-listing-icon {
  display:none;
}
After removing the icons

Field Icons in the Booking Form

Fields with their icons on the left

Each field on the booking form displays an icon on the left side. Use this CSS to hide the icons on the booking form:

/* Hide the icons for the fields in the booking form screen */
body .md-input-container .md-icon {
display: none;
}

body .md-input-container .md-icon:not(.md-icon-delete)~label {
left: 0;
}

body .md-input-container .md-icon:not(.md-icon-delete)~.md-input {
margin-left: 0;
}
/* --------------------------------------------------------- */
Fields with hidden icons

Still stuck?

File a support ticket with our five-star support team to get more help.

File a ticket

  • Please provide any information that will be helpful in helping you get your issue fixed. What have you tried already? What results did you expect? What did you get instead?
  • This field is for validation purposes and should be left unchanged.

Related Guides