Make sure to add the CSS in SSA Settings > Styles > Custom CSS field. If you’d like to learn more, see our guide on adding custom CSS to Simply Schedule Appointments.

Change the Date and Time Format

To change how the date and times are written within the slots, go to Simply Schedule Appointment Settings > General Settings and use the corresponding dropdowns to make the changes.

Time Slots In A Single List (And Hide Time Categories)

By default, the Booking Calendar will have separate columns sorting the time slots: morning, afternoon, evening, and night. Use this CSS to display the time slots as a single list:

/* Display the time slots as a single 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;
}
/* ---------------------------------------- */

To only hide the time category headings or icons, visit our other guide on hiding icons and text.

Time Slots in Rows

Use this CSS to sort the time slots into four separate rows instead of columns:

/* Sort the time slots into four separate rows (instead of columns) */
.time-select-headline + .md-layout.md-align-center {
  flex-direction: column;
}

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

Time Slots in a Row (And Hide Time Categories)

Use this CSS to combine all of the columns into a single row and remove the Night, Morning, Afternoon, and Evening icons, formatting the time slots accordingly:

/* Display the time slots as a single list in a row */
.time-select-headline + .md-layout.md-align-center {
  display: block;
}

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

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

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

ul.time-listing li {
display: inline-block;
}

.md-layout.md-column.md-column-center {
  display: inline;
}
/* ---------------------------------------- */

Related Guides

• 

  Styling the Booking Calendar

• 

  Helpful Customization Guides

• 

  Custom Email Styles for Notifications

• 

  Support Policy