Calendar - Conditionally Change Backgrounds

[alanhoffman]

Hi all..

 

I have a weekly calendar data page in my which shows that days for which assets are available..

 

Is it possible to set the background of the entire box containing all the data conditionally i.e. different colors for different assets

 

e.g.

Asset 1:  TV 

Asset 2:  DVD 

Asset 3: PC 

 

The weekly calendar shows

1st March                             2nd March                 3rd March

 

TV Ref: A1233                          -                           TV Ref: A1238

DVD Ref: A1234                   DVD Ref: A1236      DVD Ref: A1239

PC Ref: A1235                      PC Ref: A1237                 -

 

 

In the weekly calendar, is it possible for each of the assets to have a different colour background for the entire box they are in?

 

I hope the above is clear enough...

 

Many thanks

 

[MayMusic]

I have this code in HTML Block on my report page

<div id="visi[@field:ID]"></div>
<script>
var isi = document.getElementById("visi[@field:ID]");
if('[@field:Name]' == 'A'){
isi.parentNode.parentNode.style.backgroundColor = '#b3e6b3';
}else if('[@field:Name]' == 'B'){
isi.parentNode.parentNode.style.backgroundColor = 'red';
}
else if('[@field:Name]' == 'D'){
isi.parentNode.parentNode.style.backgroundColor = 'yellow';
}

</script>

ID is the unique field in the report and Name is the field I want to check background for based on the value in it

[MayMusic]

Here is my sample page https://b3.caspio.com/dp.asp?AppKey=c82f1000e126b5e0409f4a85aae0

[MayMusic]

This will change the whole cell background color

 

<div id="visi[@field:ID]"></div>
<script>
var isi = document.getElementById("visi[@field:ID]");
if('[@field:Name]' == 'A'){
isi.parentNode.parentNode.parentNode.parentNode.style.backgroundColor = '#b3e6b3';
}else if('[@field:Name]' == 'B'){
isi.parentNode.parentNode.parentNode.parentNode.style.backgroundColor = 'red';
}
else if('[@field:Name]' == 'D'){
isi.parentNode.parentNode.parentNode.parentNode.style.backgroundColor = 'yellow';
}

</script>