Question

I am using Richfaces 3.3 with seam. I have a <rich:calendar> component and I need to highlight multiple dates in it. I need to set that dates dynamically at runtime.
Is this possible with <rich:calendar> component?
Thanks.

Answer 1

You cannot select more than one date (<rich:calendar/> serves as input for a date field), you can however colorize some days in a different way than others. These are your options:

1. Disable (gray out) all dates except those you want to highlight. This forbids the user from selecting dates not enabled. You need to implement a javascript function that takes a “day” parameter and returns true or false if the date should be enabled or not. Then specify the function in the isDayEnabled attribute of <rich:calendar/> (for example <rich:calendar isDayEnabled="dayEnabledFunction" />).

2. Apply different classes to the dates you want: this allows the user to select any date but still highlights the dates you want. Create a css class and apply that class only to the dates you want. Again, implement a javascript function that takes a “day” parameter and returns a string with the name of the class you want applied. Return an empty string for the dates you don’t want highlighted and your new css class name for the dates you want highlighted. Then specify the function in the dayStyleClass attribute of <rich:calendar/> (for example <rich:calendar dayStyleClass="dayStyleFunction" />).

To pass the dates to the javascript function, your server side should generate appropriate JavaScript code, for example:

<script type="text/javascript">
    highlightDates = new Array();
    #{myComponent.dateList}
</script>

The MyComponent code:

@Named("myComponent")
public class MyComponent implements Serializable {

    // The list of dates to highlight, taken from somewhere
    private List<Date> dates;

    public String getDateList() {
        StringBuilder sb = new StringBuilder();
        // Iterate the list of dates and add a javascript push
        // for each date and return the resulting string.
        for (Date d : dates) {
            sb.append("highlightDates.push(new Date(");
            sb.append(d.getTime());
            sb.append(");\n");
        }
        return sb.toString();
    }
}

An example of how the javascript function dayStyleClass="dayFunc" works follows. This assumes you have jQuery (richfaces requires it) and used the noconflict() function. We use the jQuery.inArray function, which returns the index of the value in an array, or -1 if the value is not in the array:

function dayFunc(day) { 
    return jQuery.inArray(day, highlightDates) >= 0 ? 'highlighted' : 'normal'; 
}