Overview
Earlier this week, one of our customers reached out to me and wanted to know how to conditionally control the color of events on their Bootstrap calendar. I thought the approach to achieve this could be useful to other clients so it seemed like a perfect topic for a tech blog post.
Implementation
To start, see this Bootstrap calendar below. Notice that all of the events are the default blue color. In this example, we are going to set a rule so that any orders greater than $20,000 will be green, otherwise the rest will be red.
Next, I am going to build a calculation that describes the rule I listed above, namely that if the Order Amount is greater than 20k, set a CSS class of “goodorder.” Otherwise, set a class of “badorder”
After compiling, there are two additional changes to make.
One is to add a substitution in for the calculation made in the last step. To do so, right click on the event in m-Painter, select “User Interface” then select “Edit Element.” Press “move to parent”. Then add ${row.CALCULA001} to the td class listed, as shown below:
Lastly, we need to add the css rule that explains goodorder and badorder. You can modify the global stylesheet or add the code directly to the page. For this techblog post, I will illustrate the latter.
In m-Painter click View -> Source. Open the ‘CSS’ pane and add the following right under the comment /**add app CSS styles here**/
.fc-event.goodorder{background-color:green;}
.fc-event.badorder{background-color:#dd544a;}
Notice that that fc-event is part of the code. This is important as it tells the browser that this, more specific rule, should be applied to each event.
Once saved, you can run your application and see the color logic has been applied properly!