jquery - Primefaces 日历，为周末和节假日应用自定义样式

Question

我想为 p:calendar 应用周末和节假日的 CSS。我正在尝试调用 beforeShowDay 事件使用 jQuery 并根据条件设置 css。

<script>
    $(document).ready(function(){
       $(".hasDatepicker").datepicker("option", "beforeShowDay", function (date) {
          //If condition true
          return [true,'holidays'];
          //else
          return [true,''];
       });
    });     
</script>

<style>
    .holidays {background-color: wheat;}
</style>

<h:form prependId="false">
      <p:calendar/>
</h:form>

但是该事件没有被解雇。我还缺少什么吗，或者有其他方法吗？

Answer 1

您应该使用beforeShowDay属性

beforeShowDay : Callback to execute before displaying a date, used to customize date display.

Use beforeShowDay javascript callback to customize the look of each date. The function returns an array with two values, first one is flag to indicate if date would be displayed as enabled and second parameter is the optional style class to add to date cell. Following example disabled tuesdays and fridays. (PrimeFaces Userʼs Guide page 50)

<p:calendar value="#{dateBean.date}" beforeShowDay="tuesdaysAndFridaysDisabled" />


function tuesdaysAndFridaysDisabled(date) {
    var day = date.getDay();
    return [(day != 2 && day != 5), '']
}

---

jQuery 解决方案

如果您想在不修改 primefaces 元素的情况下解决此问题，而是使用 jquery datepicker beforeShowDay 属性，请查看本教程 Primefaces calendar – highlight dates