Back to Plugin Settings Guides

This guide applies to:

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

Introduction

Copy and paste any of the following CSS snippets into your SSA plugin to format and layout the time slots to your liking. Or, find other ways to customize the Booking Calendar in the Style with CSS Snippets guide.

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 the way that 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.

Change the date and time formats in the General Settings

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 a single column
Time slots in a single column

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 shown in rows
Time slots shown in rows

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:

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

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