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 buttons. 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 buttons.


All Buttons on the Cancel/Reschedule Screen

The default notification message includes a link to Cancel/Reschedule the booked appointment. When customers click that link they’re able to see a couple of buttons to edit their appointment.

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.

/* Hide the 'save to calendar', 'edit information', 'reschedule/cancel appointment', and 'schedule a new appointment' buttons on cancellation screen */
.md-card-actions.cancellation-actions { 
display: none; 
}

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.

/* Hide the 'save to calendar', 'edit information', 'reschedule/cancel appointment', and 'schedule a new appointment' buttons on confirmation screen */
.md-card-actions.confirmation-actions { 
display: none; 
} 

Individual Buttons on the Confirmation Screen

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

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.

Save to Calendar

/* Hide the 'save to calendar' button on confirmation screen */
body .calendar-save {
display: none;
}

Schedule a New Appointment

/* Hide the 'schedule a new appointment' button on confirmation screen */
body .appointment-book-new-button {
display: none;
}

Reschedule

/* Hide the 'reschedule' button on confirmation screen */
body .appointment-reschedule-button {
display: none;
}

Edit Information

/* Hide the 'edit information' button on confirmation screen */
body .appointment-edit-button {
display: none;
}

Cancel Appointment

/* Hide the 'cancel appointemnt' button on the confirmation screen */
body .appointment-cancel-button {
display: none;
}


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