3

Primefaces の Schedule タグで選択した日付に背景色を追加する方法は?

私はすでにスタイルを使用していますが、スケジュールの背景色に使用しています。スケジュール内で選択した日付の背景色を取得したいので、アイデアがあれば共有してください..

4

1 に答える 1

3

あなたが探しているスタイルクラスは

ui-state-highlight

Primefacesのドキュメントには、特定のコンポーネントのスタイルを変更する方法が説明されています。

あなたのフェイスレットで：

<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-day19content を持つテーブル セルには、特別なスタイル クラスがあることに注意してください18。

次の jQuery コマンドは、この特別なクラスに基づいて、このセルの背景色を変更します。

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

これは問題の完全な解決策ではありませんが、これがどのように機能するかです。目的の日付のテーブル セルを特定し、それに応じてスタイルを変更する必要があります ( jQuery で使用background-colorする場合は、css をキャメル ケースにする必要があることに注意してくださいbackgroundColor。これが役に立てば幸いです。

于 2012-04-27T06:54:04.440 に答える