Acuity Scheduling

Welcome to the Acuity Scheduling
Developer Hub!



Here you'll find guides and documentation to help you start working with Acuity as quickly as possible, as well as support if you get stuck. Let's jump right in!


Client Scheduler

  • Embed Code
  • CSS Customization
  • Dynamic Links

Integration

  • Webhooks
  • Custom Sidebar
  • OAuth2

Scheduling API

  • Create Appointments
  • Browse Availability
  • Block Off Time

CSS Examples for Customizing the Scheduling Page

The client facing scheduling page can be customized beyond the basic options within the Customize Appearance Settings. Below are some useful CSS code that you can add to your Advanced CSS Settings to further customize your scheduling page.

Function

CSS Code

Make appointment type names bigger & bolder

.appointment-type-name { font-size: 120%; font-weight: bold; }

Make Client Registration Link Login Text bigger/bolder

.login-container { height: 80px; font-size:20px; padding-top:25px; }

Change the color of background

body { background-color: #ffffff; }

Hide "More times" on Daily View template client scheduling page

.calendar-next { display: none; }

Hide "Save Credit Card for Future Use" checkbox

div.col-sm-12 { display: none; }

Change background color of the appointment type boxes

.select-item {background-color: #DFDFDF ;}

Changing the hover color of the appointment type boxes

.select-item:hover {background-color: #FF0000;}

Hide Quantity in the Package Checkout

`input.form-control.inline-field {
display:none;
}
input.form-control.inline-field[name="certificate"] {
display: block;
}

th[data-original-text="Quantity"] {

opacity: 0;
}`

Hide list of what a package code is redeemable for

.certificate-amount-remaining ul {display: none;}

Hide steps/tabs at top of Monthly template scheduling page

ol.steps { display: none; }