Colorize Calendar. Custom JS

[George43]

I Have team members who can take day-off. I want to colorize Day's based  on Rule or Status

[Hastur]

Hello!

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;";
  }
 }
});
</script>

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

[astroboy]

Hi there! Caspio recently launched an  App Extension similar to this, so if you want to add this in your application, you may check this link out:

https://www.caspio.com/services/request-info/?e=Custom Calendar

You may also check the rest of the available App Extensions in this link below:

https://www.caspio.com/services/app-extensions/

[Kurumi]

Hi! Just an update on this, Caspio has a Tech tip called Color-Coding in DataPages. To know more on how to implement it in the DataPage, you can check it here: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/color-coding-in-datapages/