Context: Calpendo can already support being able to amend the booking heading colour.  In this KB I will show you how to highlight a data property in the booking block if a condition is met. For this example the booking menu has an option to select a technician for a booking using a boolean and we will therefore look at how to change its background colour to yellow when the boolean in the booking is set to True.



Suitable for: Admins.  Some CSS understanding would be recommended for amending further however if you are unsure how to tweak the CSS for your scenario please don't hesitate to contact support@exprodo.com 


Objective: Understand how a CSS class can be created to check the value of data passed from the HTML and apply different settings accordingly.


Step 1: Add a new class definition to the site's CSS

  1. In the Admin menu go to Global Preferences and select Appearance.
  2. In the User CSS tab scroll to the bottom
  3. Add the follow CSS to create a new class definition for "technician"
  4. .technician[data-technician="true"]:before {
 content : "technician required";
 background-color:yellow;
}
  5. This will check whether an attribute which will be defined in the next step called data-technician is set to "true"
  6. If you want to set an additional style for when the value is false add another class with the same name and set the boolean and colour values accordingly


Step 2: Add the property to the booking block

  1. Still in Global Preferences go to Bookings
  2. In the section Format for Bookings on the Calendar find the Booking day/week content format
  3. Change it to "Specify the format" and add the following HTML
  4. <div data-technician="%technicianRequired%" class="technician">

    The div will now contain an attribute which points to the underlying property being set in the Booking (and therefore in the bakery) called "technicianRequired" as well as the css class which was defined in step 1


Other possibilities


Highlight entire booking body- remove :before from CSS
- remove content line from CSS
- change HTML within the Booking day/week content format to include height:

<div data-technician="%technicianRequired%" class="technician" style="height: 100%;">