This guide applies to:

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

What You Need First

Version Release: x.3.8.2

Please see our article on adding custom CSS to Simply Schedule Appointments.


🦊 Hide Appointment Duration

By default the Appointment Duration will be shown under the Appointment Type name and on the Booking Confirmation Screen.

appointment duration shown under appointment type name

In the image below the Appointment Duration is hidden.

Appointment duration removed

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

body .appointment-duration {
display: none;
}

Note: This does not affect your email and SMS Notifications – if you would like to remove the Appointment Duration from those messages that must be done separately in the Notification Settings.

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:

body .divider {
display: none;
}

🦊 Hide 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

In the image below the Start and End Times are hidden on the Booking Form.

after start and end times are removed on booking calendar

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

Hide Start Time

body .appointment-start-time {
display: none;
}

Hide End Time

body .appointment-end-time {
display: none;
}

Note: This does not affect your email and SMS Notifications – if you would like to remove the Start and End Times from those messages that must be done separately in the Notification Settings.


🦊 Hide Buttons on the Confirmation Screen

buttons on the confirmation screen

To hide individual buttons on the confirmation screen such as Save to Calendar, Edit Information, Reschedule, Cancel Appointment, and Schedule a New Appointment use the following CSS.

Hide Save to Calendar

body .calendar-save {
display: none;
}

Hide Edit Information

body .appointment-edit-button {
display: none;
}

Hide Reschedule

body .appointment-reschedule-button {
display: none;
}

Hide Cancel Appointment

body .appointment-cancel-button {
display: none;
}

Hide Schedule a New Appointment

body .appointment-book-new-button {
display: none;
}

Hide “What would you like to do next?”

.appointment-actions .md-subheading { 
display: none; 
}

🦊 Hide All Buttons on Confirmation Screen

To hide ALL the buttons on the confirmation screen such as Save to Calendar, Edit Information, Reschedule, Cancel Appointment, and Schedule a New Appointment use the following CSS.

.md-card-actions.confirmation-actions { 
display: none; 
} 

🦊 Hide All Buttons on the Cancel/Reschedule Screen

The Cancel/Reschedule Screen is linked to customers in the default email notification messages.

To hide ALL the buttons on the cancel/reschedule screen such as Save to Calendar, Edit Information, Reschedule, Cancel Appointment, and Schedule a New Appointment use the following CSS.

.md-card-actions.cancellation-actions { 
display: none; 
}

🦊 Hide icons on booking form

After customers have selected the date and time for their appointment, they are asked for information, including name and email address. Here’s how to hide the icons on that form.

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;
}

🦊 Hide action buttons on booking form

After customers finish booking their appointment, they are given options to edit/cancel/reschedule. Here’s how to hide those options:

.confirmation-actions .appointment-actions {
display: none;
}

🦊 Hide the “What type of appointment are you booking?” header

When a customer is booking an appointment, if you have more than one appointment type to choose from, this header appears above the appointment type choices. If you’d prefer it not display, you can hide it with CSS:

.md-title.ssa-type-header {
display: none;
}

🦊 Show the available appointment times in a single list (not broken into Morning, Afternoon, etc)

When the customer is asked to select a time, the available time slots are divided in up to 4 separate columns for morning, afternoon, evening, and night. If you’d rather display those as a single list, this CSS will combine all times into one list:

.time-select-headline + .md-layout.md-align-center {
  flex-direction: column;
}

.time-select-headline + .md-layout.md-align-center .md-subheading {
  display: none;
}

.time-listing-icon {
  display: none;
}

ul.time-listing {
  padding-bottom: 0;
}

🦊 Show the available appointment times as a row instead of a column

When the customer is asked to select a time, the available time slots are divided up into 4 separate columns for morning, afternoon, evening, and night. If you’d rather display those as rows instead of columns, this CSS will accomplish that:

.time-select-headline + .md-layout.md-align-center {
  flex-direction: column;
}

ul.time-listing {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}

🦊 Change colors of dates depending on availability

If you’d like to make the difference between dates available for appointments and those that are not, you can add some CSS styles to make those stand out more. For example, this CSS will give unavailable dates a pale red background with red text, while available dates have a pale green background and green text:

.book-day button.md-whiteframe.selectable {
	background: #E8F5E9;
	color: #4CAF50;
}

.book-day button.md-whiteframe.disabled {
	background: #FFEBEE;
	color: #F44336;
}

More to come soon!