Thursday, September 2, 2010

Calendar Inline Datepicker and Dynamic Actions

There is a way to technique to display google like Calendar in Apex where you select the start date and end date from the DatePicker and automatically the Calendar refreshes.

Let me explain the step by step process of how to achieve this.

1. Create a Calendar with Partial Page Refresh and include Custom Calendar as well.
2. Create two jquery based datepicker items (for example P1_SD and P1_ED), both having date format YYYYMMDD.
3. Create Dynamic Action named refresh_calendar, should be having the following properties
Event : Change
Selection Type : Item
Item : P1_SD
Action
Action : Execute Javascript Code
Code : apex.widget.calendar.ajax_calendar('C','same',$v('P1_SD'),$v('P1_ED'));
4. Create another Dynamic Action duplicating Step 3, but for selection item P1_ED.
5. Delete "Monthly","Daily","Weekly".
6. Run the Page and Select Start Date using DatePicker, should be seeing the Calendar getting refreshed, trying selecting end date from the second Datepicker should be seeing the Calendar refresh automatically.
7. Click on next and previous to see difference of days between start date and end date getting skipped.
8. So a single view of calendar is used for Day,Week and Month.

Click here for the Demonstration Application