{"id":10423,"date":"2018-09-07T10:29:25","date_gmt":"2018-09-07T16:29:25","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/techblog\/?p=10423"},"modified":"2023-06-21T13:13:11","modified_gmt":"2023-06-21T19:13:11","slug":"color-coding-in-a-bootstrap-calendar","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/techblog\/?ht_kb=color-coding-in-a-bootstrap-calendar","title":{"rendered":"Color Coding in a Bootstrap Calendar"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Implementation<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p><br><img decoding=\"async\" src=\"\/techblog\/images\/calcolor1.png\"><\/p>\n\n\n\n<p>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 &#8220;goodorder.&#8221; Otherwise, set a class of &#8220;badorder&#8221;<br><img decoding=\"async\" src=\"\/techblog\/images\/calcolor2.png\"><\/p>\n\n\n\n<p>After compiling, there are two additional changes to make. <\/p>\n\n\n\n<p>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 &#8220;User Interface&#8221; then select &#8220;Edit Element.&#8221; Press &#8220;move to parent&#8221;. Then add ${row.CALCULA001} to the td class listed, as shown below:<br><img decoding=\"async\" src=\"\/techblog\/images\/calcolor3.png\"><\/p>\n\n\n\n<p>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. <\/p>\n\n\n\n<p>In m-Painter click View -> Source. Open the &#8216;CSS&#8217; pane and add the following right under the comment <code><mark style=\"background-color:rgba(0, 0, 0, 0);color:#57956a\" class=\"has-inline-color\">\/**add\u00a0app\u00a0CSS\u00a0styles\u00a0here**\/<\/mark><\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">  .fc-event.goodorder{background-color:green;}\n  .fc-event.badorder{background-color:#dd544a;}<\/pre>\n\n\n\n<p>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.<br><img decoding=\"async\" src=\"\/techblog\/images\/calcolor4.png\"><\/p>\n\n\n\n<p>Once saved, you can run your application and see the color logic has been applied properly!<br><img decoding=\"async\" src=\"\/techblog\/images\/calcolor5.png\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[154],"ht-kb-tag":[],"class_list":["post-10423","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-bootstrap"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/10423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10423"}],"version-history":[{"count":8,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/10423\/revisions"}],"predecessor-version":[{"id":11931,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=\/wp\/v2\/ht-kb\/10423\/revisions\/11931"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10423"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-category&post=10423"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/techblog\/index.php?rest_route=%2Fwp%2Fv2%2Fht-kb-tag&post=10423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}