Rich Calendar - 突出顯示所選日期

Question

我正在使用Richfaces 3.3和seam。我有一個<rich:calendar>組件，我需要突出顯示它的多個日期。我需要在運行時動態設置日期。 這可能與<rich:calendar>組件？ 謝謝。

Answer 1

您不能選擇多個日期（<rich:calendar/>作爲日期字段的輸入），但是您可以使用與其他日期不同的方式着色某些日期。這些是你的選擇：

1. 禁用（灰色）所有日期，除了那些你想突出顯示。這禁止用戶選擇不啓用的日期。您需要實現一個採用「日」參數的JavaScript函數，如果日期應該啓用，則返回true或false。然後在<rich:calendar/>的屬性isDayEnabled中指定函數（例如<rich:calendar isDayEnabled="dayEnabledFunction" />）。

2. 將不同的類應用到你想要的日期：這允許用戶選擇任何日期，但仍然突出你想要的日期。創建一個css類並將該類僅應用於所需的日期。再次，實現一個JavaScript函數，該函數接受「day」參數並返回一個字符串，其中包含要應用的類的名稱。爲您不想突出顯示的日期返回一個空字符串，併爲您要突出顯示的日期返回新的CSS類名稱。然後在<rich:calendar/>的dayStyleClass屬性中指定該功能（例如<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'; 
}