10 August 2009

Disable days on rich:Calendar

This article covers how you'd disable some days on the Richfaces Calendar component. For a recent project, I needed to only allow users to pick Saturdays.

Here's the XHTML Facelets code for the tag:
<rich:calendar value="#{oc.overtimeDate}" requiredMessage="Date 1 is required."
id="#{oc.overtimeDateId}" isDayEnabled="isDayEnabled"
dayStyleClass="getDisabledStyle" datePattern="MM-dd-yyyy"
required="#{oc.id == 1 ? true : false}" firstWeekDay="0"/>
Note two items: the isDayEnabled and dayStyleClass attributes. Both have their values set via the following JavaScript functions:
<script type="text/javascript">
function isDayEnabled(day){
   var date = new Date(day.date);
   return (date.getDay() == 6); // 6 is Saturday, the only day that should be enabled.
}
function getDisabledStyle(day){
   if (!isDayEnabled(day)) return 'rich-calendar-boundary-dates disabledDay';
}
</script>
The isDayEnabled() function uses the day argument to get the date and then the day of the week. It returns true if the day of the week is Saturday, false otherwise. This took some trial-and-error, because I didn't know how to get to the day object's date.

The getDisabledStyle() function again receives the day object, which it uses to determine the CSS style class to use. It's returning two classes for that element in this case. The second style is a custom one and is defined here:
<style>
.disabledDay{
 background-color:gray;
}
</style>
Update: Jerick Osiel asked for help on how to highlight/select a week on the calendar. The answer was thanks to Makhiel on Stackoverflow.com:
<h:outputStylesheet>
    .highlightWeek {
        color: red;
        background-color: black;
    }
</h:outputStylesheet>
<h:outputScript>
    var currentWeekNumber = … // determine current week number
    chooseDay = function(day) {
        if (day.weekNumber == currentWeekNumber) return 'highlight';
            return '';
        }
</h:outputScript>
<h:form>
    <rich:calendar dayClassFunction="chooseDay" />
</h:form>

11 comments:

/^\ Pharaoh /^\ said...

Thanks :)

Vitor Douglas Rumanski said...

thanks brow! you rock!

renzoxo said...

thanks :)

Fotos said...

Very good ! Thanks!

Jerick Osiel said...

hey how can i highlight the current week? or even the selected week? please do answer

Alex C said...

Hi Jerick. I've not used RichFaces for a few years now. One of the best places to post your question is http://stackoverflow.com/ and you can also try http://www.jboss.org/richfaces/community

Good luck!

Jerick Osiel said...

i searched the whole google in many different question but same idea but i couldnt just find the right answer. ive been doing this for almost 2 weeks :( please do email me if you knew something that might help the issue SUPER THANKS.



Email: light112717@yahoo.com

Alex C said...

Jerick, see above for the update.

Jerick Osiel said...

thanks for excellent cooperation @
alex C but i got the code for choosing the highlighted week what my problem is i cant search any function that i can use in showing the value of current week this seem to be my problem at the very beginning thanks for the support, i appreciate it very well ! youre so kind!

Anonymous said...

Hi ,
My current date also gets disabled because of this function. How can I enable that??

Alex C said...

Sorry, I've not worked with the rich:Calendar for awhile. A great place to find an answer: http://www.stackoverflow.com

Post a question and you should have an answer quickly.