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>

Referencing an object in JSF/Richfaces

With JSF 1.2, referencing objects in the component tree isn't as straightforward as it used to be. The findComponent() method has been deprecated, so we must use other means to find an object. Jacob Hookom and Ric Smith provide slight variations on how to accomplish this task. Both involve using the ContextCallback object; here's a snippet to give you an idea:

public static final ContextCallback RENDER = new ContextCallback() {
  public void invokeContextCallback(FacesContext ctx, UIComponent c) {
   c.renderAll(ctx);
  }
};

boolean found = root.invokeOnComponent(faces, clientId, RENDER);

if (!found) throw new FacesException(clientId + " not found!");

Note in the above code, you use the invokeOnComponent() method to (what else?) invoke a particular action on the component in question. Note that you need to use the client ID for the object, which in JSF looks something like this: myForm:myComponentID

In turn, the RENDER method calls invokeContextCallback(), which carries out some action on the component. This can be handy for programmatically adding controls to the page at a specific location; c.renderAll(ctx) can be replaced with whatever you need.

You can also add objects to the page using Max Katz' technique, though I'm not sure if that way you're allowed to put them at a specific location in the component tree.