How-to colorize days in <rich:calendar>?
crabman Feb 3, 2010 6:53 AMI saw this example:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<style>
.everyThirdDay{
background-color:gray;
}
.weekendBold{
font-weight:bold;
font-style: italic;
}
</style>
<script type="text/javascript">
var curDt = new Date();
function disablementFunction(day){
if (day.isWeekend) return false;
if (curDt==undefined){
curDt = day.date.getDate;
}
if (curDt.getTime() - day.date.getTime() < 0) return true; else return false;
}
function disabledClassesProv(day){
if (curDt.getTime() - day.date.getTime() >= 0) return 'rich-calendar-boundary-dates';
var res = '';
if (day.isWeekend) res+='weekendBold ';
if (day.day%3==0) res+='everyThirdDay';
return res;
}
</script>
<rich:calendar isDayEnabled="disablementFunction" dayStyleClass="disabledClassesProv" boundaryDatesMode="scroll"/>
</ui:composition>
But I need to colorize days of three types: green, red, blue. Choosing of type will be implemented in bean according to database. For example if the date exists in some DB table, then colorize it green, etc.
I want to use something like this:
<style>
.blue{
background-color:blue;
}
.red{
background-color:red;
}
.green{
background-color:green;
}
</style>
<script type="text/javascript">
function colorize(day){
var res = '';
#{timeboardController.date}=day.day;
if(#{timeboardController.isFirstType}) res = 'blue';
if(#{timeboardController.isSecondType}) res = 'green';
if(#{timeboardController.isThirdType}) res = 'red';
return res;
}
</script>
...
<rich:calendar value="#{timeboardController.date}" dayStyleClass="colorize" popup="false"
showFooter="false" showWeeksBar="false" cellWidth="40px" cellHeight="40px"/>
date property at TimeboardController has type java.util.Date. Methods getIsFirstType() and other will use date property and return boolean value.
The problem is that #{timeboardController.date}=day.day; not working.
Also I tried to use in javascript
document.getElementById('date').value=day.day;
...
<h:inputText id="date" value="#{timeboardController.date}" />
but it didn't work.
How can I set the property of bean in javascript and then check some bean's methods?
Thanks in advance.