Color Coding in a Bootstrap Calendar

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.

To start, see this Bootstrap calendar. 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.

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. Click View, then Source. Find the tag and add the following code directly before it:

   <style type="text/css">
	.fc-event.goodorder{background-color:green}
	.fc-event.badorder{background-color:#dd544a}
    </style>

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!

Related Posts:

  • No Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *