You are on page 1of 18

ADF Calendar application with multiple providers

In this post we are going to build an ADF calendar application with multiple providers. A provider can
schedule two types of events either a Group event or an Individual Person event.

Also, Provide an ability to filter the calendar events based on provider selection
and Provide an ability to choose different color styles for each provider.

Step 1:

For the building of calendar application we have to create the following 3 new tables in HR Schema.
Table 1: Calendar : To place all the calendar events
Table 2: Providers : List of providers for calendar
Table 3: Groups : List of available groups for scheduling events
And we are using Table 4: Employees (already existing) : List of persons for
scheduling individual events

Script to create the tables -
--Create Calendar Table
CREATE TABLE CALENDAR
(
ID VARCHAR2(20 CHAR) NOT NULL
, PROVIDER VARCHAR2(100 CHAR) NOT NULL
, START_DATE DATE NOT NULL
, END_DATE DATE NOT NULL
, TITLE VARCHAR2(200 CHAR) NOT NULL
, LOCATION VARCHAR2(200 CHAR) NOT NULL
, EVENT_TYPE VARCHAR2(1 CHAR) NOT NULL
, PERSON_ID VARCHAR2(20 CHAR)
, GROUP_ID VARCHAR2(20 CHAR)
, ISRECURRING VARCHAR2(20 CHAR)
, CONSTRAINT CALENDAR_PK PRIMARY KEY
(
ID
)
ENABLE
);

--Create Calendar Sequence
CREATE SEQUENCE CALENDAR_SEQ
START WITH 1000
INCREMENT BY 1
NOCACHE
NOCYCLE;

-- Create Groups
CREATE TABLE GROUPS
(
ID VARCHAR2(20 CHAR) NOT NULL
, NAME VARCHAR2(100 CHAR) NOT NULL
, CONSTRAINT GROUPS_PK PRIMARY KEY
(
ID
)
ENABLE
);

-- Create Providers
CREATE TABLE PROVIDERS
(
ID VARCHAR2(20 CHAR) NOT NULL
, NAME VARCHAR2(100 CHAR) NOT NULL
, CONSTRAINT PROVIDERS_PK PRIMARY KEY
(
ID
)
ENABLE
);

Insert the below test data in Providers and Groups tables;
-- Insert test data into providers table
insert into providers values ('101','Provider A');
insert into providers values ('102','Provider B');
insert into providers values ('103','Provider C');


-- Insert test data into Groups table
insert into groups values ('3001','Group A');
insert into groups values ('3002','Group B');
insert into groups values ('3003','Group C');

Step 2:

Build the EO's and VO's based on the Calendar, Provider, Groups and Employees tables.





Steps 3:

Define the three bind variables startDate (Date type), endDate(Date type) and timeZone(String type) on
Calendar View Object, without these three transient attributes the adf faces doesn't show the calendar
option while dragging and dropping this VO on to the page.

Here the data types of the bind variables are important to recognize the calendar component but not the
variable names.


















Step 4:

Build the CalendarAM application module and add the view objects to it.
















Step 4:

Create the calender.jsff page in CalendarUI project and place the panelSplitter component to divide the
screen horizontally. Place all the providers in first panel and calender component in second panel.

Drag and drop the CalendarVO from CalendarAMDataControl to the Calendar.jsff page




















Note: Above Calendar in create list only dispalyed if the VO has 2 Date and 1 String bind variables
defined on it.

And Select the calendar activities attributes accordingly.


















Select and shuffle the required attributes in Calendar Model.


















select the providers details and select finish.



















After placing the providers in first panel and calender component in second panel code looks like




















Implemented all the logic needed to get the providers list and default color for provider in the bean
CalendarBean.java file.

To apply for style colors on different providers, activity styles need to be applied on calendar component.

































To enable/disable the providers on calendar activities, create a method in CalendarAMimpl.java and
apply the programmatic view criteria to include only the selected providers in CalendarVO, Call this
method when a provider is enabeld/disabled.


















Complete application can be downloaded here. Run the CalenderTest.jspx page to view the Calendar
App demo.


























Display Holiday Name in af:calendar
By Arunkumar Ramamoorthy on Jan 14, 2013
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.

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;
}

https://blogs.oracle.com/aramamoo/entry/display_holiday_name_in_af

You might also like