如何为选定的日程日期添加背景颜色

Question

如何为选定的日程日期添加背景颜色

cssjsfprimefacesbackground-color

3

如何在Primefaces的日程标签中为选定的日期添加背景颜色？我已经使用了style，但它应用于整个日程的背景颜色。我想要为我的选定日期获取背景颜色，所以如果你们有任何想法，请分享。

- Santosh

1个回答

阿里云服务器只需要99元/年，新老用户同享，点击查看详情

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- Matt Handy · Accepted Answer

您所寻找的样式类是：

ui-state-highlight

Primefaces文档解释了如何更改特定组件的样式：在你的Facelet中：

<p:schedule styleClass="custom">
...
</p:schedule>

在你的css中：

.custom .ui-state-highlight {
    background: yellow !important;
}

更新1:

这里是一个完整的可用示例:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core"     
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Facelet Title</title>
        <style type="text/css">
            .custom .ui-state-highlight {
                background: yellow !important;
            }
        </style>
    </h:head>
    <h:body>
        <p:schedule styleClass="custom">
        </p:schedule>
    </h:body>
</html>

更新2：

基本上，PrimeFaces日程表中的一天是类似于这样的表格单元格：

<td class="fc-fri ui-widget-content fc-day19">
  <div>
    <div class="fc-day-number">18</div>
    <div class="fc-day-content">
      <div style="position:relative">&nbsp;</div>
    </div>
  </div>
</td>

请注意，表格单元格中有一个特殊的样式类fc-day19，其内容为18。以下jQuery命令基于这个特殊类更改此单元格的背景颜色：

$(".fc-day19").css("backgroundColor","green");

这并不是你问题的完整解决方案，但这是一个可行的方法。您需要识别所需日期的表格单元，并相应地更改其样式（请注意，如果在jQuery中使用，css background-color 需要写成驼峰式的backgroundColor）。希望这可以帮到你。