WP Time Slots Booking Form Blog

The easy way to create powerful booking forms for WordPress websites.

Blog / Changing styles of the dates depending of the amount of booked/available bookings

Changing styles of the dates depending of the amount of booked/available bookings

You can set a different color/style of the dates depending of the number of booked/available slots for that date so the user can get an idea of the amount of spaces available without clicking the date. This feature is useful for example to indicate to the customers the dates where there are few slots available so they know to hurry up.


The calculation is made using the total number of capacity for the date instead using the number of slots. For example you can have a date with two slots available at 09:00 and 10:00 each one with capacity 50, in this case the total capacity of the date will be 100 and the calculation of available spaces will be made based in that capacity.

The style classes that can be used are the following:

  • .ts_booked0 : Styles for dates with booked capacity >= 0% and < 10% .
  • .ts_booked1 : Styles for dates with booked capacity >= 10% and < 20% .
  • .ts_booked2 : Styles for dates with booked capacity >= 20% and < 30% .
  • .ts_booked3 : Styles for dates with booked capacity >= 30% and < 40% .
  • .ts_booked4 : Styles for dates with booked capacity >= 40% and < 50% .
  • .ts_booked5 : Styles for dates with booked capacity >= 50% and < 60% .
  • .ts_booked6 : Styles for dates with booked capacity >= 60% and < 70% .
  • .ts_booked7 : Styles for dates with booked capacity >= 70% and < 80% .
  • .ts_booked8 : Styles for dates with booked capacity >= 80% and < 90% .
  • .ts_booked9 : Styles for dates with booked capacity >= 90% and < 100% .

For example for marking in orange all dates with 70% of more of booked capacity:

.ts_booked7 a {background:#ffe119 !important;}
.ts_booked8 a {background:#ffe119 !important;}
.ts_booked9 a {background:#ffe119 !important;}

... and for marking in green all slots with more than 0 and less than 70% booked capacity:

.ts_booked0 a,.ts_booked1 a,.ts_booked2 a,.ts_booked3 a,
.ts_booked4 a,.ts_booked5 a,.ts_booked6 a {background:#3cb44b !important;color:#fff !important}

Add the styles into the "WP Time Slots Booking Form >> General Settings >> Edit Styles" area.

The following CSS classes are available for marking slots not available:

  • .nonavailableslots : Styles for dates without available slots (ex: full capacity booked).
  • .nonworkingweekday : Styles for non working-weekdays.
  • .invalidDate : Styles for dates marked as "invalid" (ex: holidays).

For example for marking in red dates with no availability (fully booked, holiday or non-working weekday):

.nonavailableslots a {background:#e6194b !important; color:#fff !important}
.nonworkingweekday a {background:#e6194b !important; color:#fff !important}
.invalidDate a {background:#e6194b !important; color:#fff !important}

The result will be like this:

non available dates

As previously mentioned add the styles into the "WP Time Slots Booking Form >> General Settings >> Edit Styles" area:

Invalid date styles

Feedback about these features will be welcome, feel free to open a support ticket for any question.