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

【问题标题】：Primefaces calendar, apply custom style for weekends and holidaysPrimefaces 日历，为周末和节假日应用自定义样式
【发布时间】：2012-11-15 07:12:50
【问题描述】：

我想为 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>

但是事件没有被触发。还有什么我遗漏的，或任何其他方法吗？

【问题讨论】：

这个 1 效果更好吗？ stackoverflow.com/a/7112923/617373
$('#something').datepicker({ beforeShowDay:function(date){......} 需要组件的 id，我想为所有日历组件调用相同的脚本我的申请。
只使用类选择器，就像这样$('.hasDatepicker').datepicker({ beforeShowDay:function(date){......}
试过但没有运气.... $(document).ready(function () { $('.hasDatepicker').datepicker({ beforeShowDay:function(date){ alert('hi' ); } }); });

标签： jquery primefaces

【解决方案1】：

你应该使用beforeShowDay属性

beforeShowDay : 在显示日期之前执行的回调，用于自定义日期显示。

使用 beforeShowDay javascript 回调来自定义每个日期的外观。该函数返回一个具有两个值的数组，第一个是指示日期是否显示为启用的标志，第二个是标志参数是添加到日期单元格的可选样式类。以下示例禁用星期二和星期五。（PrimeFaces 用户指南第 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

【讨论】：

嗨丹尼尔，谢谢你的回答，但我的想法是在我的应用程序的标题布局中添加上述脚本，它将为所有页面的所有日历组件调用而不指定' beforeShowDay' 属性。
将您的 js 代码放在某个 js 文件中，将其包含在您的标题中，然后将 beforeShowDay="myJsFuncFromMyJsFile" 添加到您的所有日历中，您只需编写一次代码并在所有日历中重用它，这种方法比解决方法好得多......另外，看看我发布的链接你会发现你感兴趣的解决方法
雅丹尼尔，这是一个好方法，但我的应用程序有 100 个页面已经构建和测试，所以我无法更改此功能的每个日历组件。
INMO 使用内置功能而不是在未来升级后可能停止工作的变通办法更安全。