Back to Booking Calendar Guides

Formatting Time and Date Slots

This guide applies to:

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

Introduction

Copy these CSS snippets to help with formatting the time slots. 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 formatting the time slots.

Show the Time Slots In A Single List (Hide Morning, Afternoon, etc columns)

Time slots in four separate columns
Time slots in four separate columns

Four separate columns sort 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;
}
/* ---------------------------------------- */
Time slots in a single column
Time slots in a single column

Show the Time Slots in Rows

Time slots shown in rows
Time slots shown 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;
}
/* ---------------------------------------- */

Change the Color of Dates Based on Availability

Weekly date color changed based on availability
Weekly date color changed based on availability

Use this CSS to make available dates stand out in your Booking Calendar:

/* Change color of available dates */
.book-day button.md-whiteframe.selectable {
	background: #E8F5E9;
	color: #4CAF50;
}

/* Change color of unavailable dates */
.book-day button.md-whiteframe.disabled {
	background: #FFEBEE;
	color: #F44336;
}

Background: Choose color of the box that holds the date.

Color: Choose color of the date text.

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:

Monthly date color changed based on availability
Monthly date color changed based on availability

Change the Time Slot Background and Text Color

Use this CSS to specifically change the color of your time in your Booking Calendar.

Specifically changing the color of time slot background and text

Inactive time slot color (color when you’re not hovering):

/* Change color of inactive time slots */
html .md-theme-default.time-select.md-button:not([disabled]).md-raised:not(.md-icon-button) {
    background: black; 
    color: white; 
 }

Active time slot color (color when you’re hovering:

/* Change color of active time slots */
html .md-theme-default.time-select.md-button:not([disabled]).md-raised:not(.md-icon-button):hover, 
html .md-theme-default.time-select.md-button:not([disabled]).md-raised:not(.md-icon-button):focus {
     background: white; 
     color: black; 
 }

Background: Choose color of the box that holds the time.

Color: Choose color of the time text.

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