Primefaces日历，适用于周末和节假日的自定义样式 [英] Primefaces calendar, apply custom style for weekends and holidays

问题描述

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

I want to apply css for weekends and holidays for p:calendar. I am trying to invoke the beforeShowDay event using jQuery and based on condition set the 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>

但是事件没有被触发.还有什么我想念的，或者其他方法吗?

But the event is not getting fired. Is there anything else I am missing, or any other approach?

推荐答案

您应使用beforeShowDay属性

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

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

使用beforeShowDay javascript回调自定义每个日期的外观.该函数返回一个 具有两个值的数组，第一个是标志，指示是否将日期显示为启用状态，第二个 参数是要添加到日期单元格的可选样式类.以下示例禁用了星期二和 星期五. (PrimeFaces用户指南第50页)

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属性，请看一下本教程

If you want to solve it without modifying your primefaces element , but using the jquery datepicker beforeShowDay attribute take a look at this tutorial Primefaces calendar – highlight dates

这篇关于Primefaces日历，适用于周末和节假日的自定义样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！