Monday Jan 14, 2013

Display Holiday Name in af:calendar

When using af:calendar component in the realtime applications, there is a frequent requirement to display the holdays in it. In this article, we will see how to achieve that.

After setting the environment, we would be expecting the output as shown in the below image.

finalOutput.jpg

Assuming we already have a page with calendar, the individual date level customizations can be done by using DateCustomizer.

For this, we would create a custom class that extends DateCustomizer class.

public class MyDateCustomizer extends DateCustomizer{
public String format(Date date, String key, Locale locale, TimeZone tz)
{
// For illustrative purpose
// Hashmap holding the holiday list
HashMap holidays = new HashMap();
holidays.put(new Date("25-Dec-2012"), "Christmas");
holidays.put(new Date("01-Jan-2013"), "New Year");

if ("af|calendar::month-grid-cell-header-misc".equals(key))
{
return holidays.get(date)!=null?holidays.get(date).toString():null;

}

return null;

}

}

As per the tag doc, following keys are passed to the format method.

  • "af|calendar::day-header-row"
  • "af|calendar::list-day-of-month-link"Year's Day".
  • "af|calendar::list-day-of-week-column"
  • "af|calendar::month-grid-cell-header-day-link"
  • "af|calendar::month-grid-cell-header-misc"
  • "af|calendar::week-header-day-link"

So, in the above code, we return the actual holiday name for the "af|calendar::month-grid-cell-header-misc" key.

In order to use the new DateCustomizer in our calendar, we create an instance of it in the backing bean and bind it to the calendar's dateCustomizer property.

Bean Code :

public class CalendarBean {
private MyDateCustomizer holidays = new MyDateCustomizer(); ;

public CalendarBean() {
}


public void setHolidays(MyDateCustomizer holidays) {
this.holidays = holidays;
}

public MyDateCustomizer getHolidays() {
return holidays;
}
}


Page Source :

<af:calendar id="c1" dateCustomizer="#{viewScope.CalendarBean.holidays}"/>

If needed, the text can be styled to be displayed in different color (as shown in the image at the top). For this, we can have a styleclass in the css

af|calendar::month-grid-cell-header-misc
{
background-color: Yellow;
}

About

Tips and Tricks from Oracle's JDeveloper & ADF QA

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today