4 Replies Latest reply on Feb 12, 2010 12:21 PM by Mikhail Cherepnev

    How-to colorize days in <rich:calendar>?

    Mikhail Cherepnev Newbie

      I 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() &lt; 0) return true; else return false; 
              }
              function disabledClassesProv(day){
                  if (curDt.getTime() - day.date.getTime() &gt;= 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.