The easy way to create powerful booking forms for WordPress websites.
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:
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:
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:
As previously mentioned add the styles into the "WP Time Slots Booking Form >> General Settings >> Edit Styles" area:
Feedback about these features will be welcome, feel free to open a support ticket for any question.