Search code examples
cssrichfaces

Is there any way to change rich:calendar holidays


I need to change the holidays in rich:calendar component. By default component shows holidays as "Sunday" and "Saturday".

Below is the style class defined for highlighting the holidays.

.rich-calendar-holly
{
background-color: #FFEBDA;
}

I want this style to work on Friday and Saturday instead of Saturday and Sunday. Can someone advice me how can I achieve it richfaces ? Is there any attribute available to set the holidays ?

Thanks in advance.


Solution

  • You could define your custom CalendarDataModel so that it returns a certain css class for Friday and Saturday, such as

    public class CalendarModelItem implements CalendarDataModelItem {
       //rest of code
       private String styleClass;
       public void setStyleClass(String styleClass) { this.styleClass = styleClass; }
       public String getStyleClass() { return styleClass; }
       //rest of code
    }
    
    public class CalendarModel implements CalendarDataModel {
        //rest of code
        public CalendarDataModelItem[] getData(Date[] dateArray) {
           CalendarDataModelItem[] modelItems = new CalendarModelItem[dateArray.length];
           Calendar c = Calendar.getInstance();
           for (Date d : dateArray) {                
                c.setTime(d);
                CalendarModelItem modelItem = new CalendarModelItem();
                if (calendar.get(Calendar.DAY_OF_WEEK) == Calendar.FRIDAY || calendar.get(Calendar.DAY_OF_WEEK) == Calendar.SATURDAY) {
                    modelItem.setStyleClass("weekend");
                } else {
                    modelItem.setStyleClass("");
                }
                modelItems[i] = modelItem;
           }
           return modelItems;
        }
        //rest of code
    }
    

    define your custom css class and reset formatting by rich-calendar-holly

    .rich-calendar-holly{
     background-color:white;
     color:black;
    }
    .weekend {
     background-color: #FFEBDA;
    }
    

    and then use this in the calendar component

    <rich:calendar ... dataModel="#{calendarModel}" />