Jump to content

Colorize Calendar. Custom JS

Recommended Posts


This feature can be implemented using additional JS code. 

Please find the example of the application attached: CaspioData_2019-Apr-24_1224.zip

The idea is to create two arrays. The first is the full information blocks of each entry. The second is the value of status.
After that, based on the value of status, we need to change the color of the block.
There is also one trick which can help you.
You can insert the value of the status in the HTML block with your own custom class. In this case, you will get the value easier.

It can be something like this: 

<p class="status">[@field:Status]</p>

Here is the example of the code to manipulate the data.:

<script type="text/javascript">
document.addEventListener('DataPageReady', function () {
 var blocks = document.querySelectorAll(".cbResultSetPanelDataContainer");
 var statuses = document.getElementsByClassName('status');

 for(var i = 0; i < blocks.length; i++) {
  if (statuses[i].innerText == "Pending") {
   blocks[i].style.cssText = "background-color: Tomato; margin-bottom: 8px; border-radius: 4px; box-shadow: 3px 3px 4px gray;";
  } else if (statuses[i].innerText == "Approved") {
   blocks[i].style.cssText = "background-color: DarkSeaGreen; margin-bottom: 8px; border-radius: 4px; box-shadow: 3px 3px 4px gray;";

You should insert this code into the footer of the calendar datapage.

Link to comment
Share on other sites

  • 2 years later...
  • 1 year later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...