Jul 8, 2008

ApEx Calendar - enhanced behavior

Hi,

A long time ago [read htmldb 1.5], I made an application that can manage appointments. I was using the monthly calendar to show a summary for everyday. I had to make my own daily calendar. Thanks to the ApEx dev team for improving the built-in calendar so now we have 3 different view: monthly, weekly, and daily.

Unfortunatly, the functionnality I was looking for isn't implemented yet. I wanted to be able to click in a cell of a monthly calendar and be redirected to the daily calendar of this day. From the daily view, I wanted to be able to click in a cell of an hour and be redirected to a form where the selected date and time would have been pre-entered in a date picker item.

Knowing Apex, I know I could quickly come up with something.

Here's the solution:

1) Create a calendar report.

For my exemple, I will add to page 5 a calendar region of type SQL Calendar.

N.B. The SQL query entered will be used by the 3 differents views (monthly, weekly, and daily).




2) Modify the monthly calendar template.

Make a copy of the existing calendar template so we can modify it without impacting anything.
We want to be able to click in a cell of a monthly calendar and be redirected to the daily calendar. We have to add a call to the JavaScript function redirect on every day cell of the calendar.

We have 4 HTML tags to modify.
-Monthly Calendar > Weekday Formats > Day Open Format
-Monthly Calendar > Weekday Formats > Today Open Format
-Monthly Calendar > Non-Day Formats > Non-Day Open Format

-Monthly Calendar > Weekend Formats > Weekend Open Format





3) Create a JavaScript function called calendarRedirect

Add this JavaScript code to your page HTML Header. Basically, this function finds the hour of the row and adds it at the end of the URL received in parameter. When I add the time at the end of the URL, I remove the ":" and replace them with "-". We will have to do the inverse process before putting the value in a date picker item.




4) Modify the daily calendar template.

We want to be able to click in a cell of a an hour and be redirected to a form.
We have to add a call to the JavaScript function calendarRedirect on every hour cell of the calendar.

We have 2 HTML tags to modify.
-Daily Calendar > Weekday Formats > Day Open Format
-Daily Calendar > Weekday Formats > Today Open Format




5) Formatting the date+time for the date picker item.

The date+time passed in the URL might not have the format your date picker item needs.
Simply add an item computation on the target page.




6) Enjoy.

ApEx calendar demo