継ぎ目付きのRichfaces3.3を使用しています。コンポーネントが<rich:calendar>
あり、その中の複数の日付を強調表示する必要があります。その日付を実行時に動的に設定する必要があります。<rich:calendar>
これはコンポーネントで可能ですか?ありがとう。
1 に答える
複数の日付を選択することはできません(<rich:calendar/>
日付フィールドの入力として機能します)が、他の日とは異なる方法で一部の日を色付けすることはできます。これらはあなたのオプションです:
強調表示する日付を除くすべての日付を無効(グレー表示)にします。これにより、ユーザーは有効になっていない日付を選択できなくなります。
true
「day」パラメータを取り、日付を有効にするかfalse
どうかを返すjavascript関数を実装する必要があります。次に、のisDayEnabled
属性で関数を指定します<rich:calendar/>
(たとえば<rich:calendar isDayEnabled="dayEnabledFunction" />
)。必要な日付にさまざまなクラスを適用します。これにより、ユーザーは任意の日付を選択できますが、それでも必要な日付が強調表示されます。cssクラスを作成し、そのクラスを必要な日付にのみ適用します。ここでも、「day」パラメーターを取り、適用するクラスの名前を含む文字列を返すjavascript関数を実装します。強調表示したくない日付には空の文字列を返し、強調表示したい日付には新しいcssクラス名を返します。次に、の
dayStyleClass
属性で関数を指定します<rich:calendar/>
(たとえば<rich:calendar dayStyleClass="dayStyleFunction" />
)。
日付をjavascript関数に渡すには、サーバー側で適切なJavaScriptコードを生成する必要があります。次に例を示します。
<script type="text/javascript">
highlightDates = new Array();
#{myComponent.dateList}
</script>
MyComponent
コード:
@Named("myComponent")
public class MyComponent implements Serializable {
// The list of dates to highlight, taken from somewhere
private List<Date> dates;
public String getDateList() {
StringBuilder sb = new StringBuilder();
// Iterate the list of dates and add a javascript push
// for each date and return the resulting string.
for (Date d : dates) {
sb.append("highlightDates.push(new Date(");
sb.append(d.getTime());
sb.append(");\n");
}
return sb.toString();
}
}
javascript関数がどのように機能するかの例を次に示しdayStyleClass="dayFunc"
ます。これは、jQuery(richfacesが必要)があり、noconflict()
関数を使用していることを前提としています。配列内の値のインデックスを返すjQuery.inArray関数を使用します。値が配列内にない場合は、-1を返します。
function dayFunc(day) {
return jQuery.inArray(day, highlightDates) >= 0 ? 'highlighted' : 'normal';
}