Highlight Specific Dates (values From Bean)

Using the primefaces component, I need to highlight certain dates. I am aware of its beforeShowDate attribute, but the dates to be highlighted need to be fetched

Solution 1:

Use an EL expression to output the dates from your bean as an array in your beforeShowDay JavaScript function. The function should check if the date is in your array, if it is set the correct CSS class in the returned array.

The output of #{bean.theDates} could be ['2014-01-01','2014-02-01'], and your JavaScript function would look something like this:

JavaScript in head of page:

<script>
    function highlightDays(date) {
        var dates = #{bean.theDates};
        var cssclass = '';
        for (var i = 0; i < dates.length; i++) {
            if (date === new Date(dates[i])) {
               cssclass = 'mycss';
            }
        }
        return [true, cssclass];
    }
</script>

PrimeFaces Calendar:

<p:calendar beforeShowDate="highlightDays" />