10.1 Creating Calendars

App Builder supports two types of calendars:

• Calendar - Calendar is based on the FullCalendar jQuery library and can only be customized through CSS.

• Legacy Calendar - Legacy Calendar is template-based and may be deprecated in the future release.

Both calendar options enable you to create a calendar based on a table or SQL query you provide. During the creation process, you are prompted to select a date column and display column. Because it offers a better user interface and numerous additional features, Oracle recommends converting all legacy calendars to the latest calendar.

1. View the page in Page Designer:
   1. On the Workspace home page, click the App Builder icon.
   2. Select an application.
   3. Select a page.
   Page Designer appears.
2. If necessary, click the Layout tab in the central pane.
3. In the Gallery, click the Regions tab.
4. Right-click Calendar, click Add To, and select the appropriate location.

   Tip:

   You also select Calendar with the mouse and drag it to the appropriate location in the Layout tab.

   The Property Editor displays Region attributes.

   The Messages tab displays a red or yellow badge to identify messages you need to address. Select a message to view the associated attribute in the Property Editor. You must address red error message before you can save.

5. To view all attributes in the Property Editor, click Show All .
6. To search for a group or an attribute, enter a keyword in the Filter Properties field.
7. In the Property Editor, edit the appropriate Region attribute:

   • Identification, Title - Enter a region title.

   • Source, SQL Query - Select the column which holds the CSS Class to style the events displayed on this calendar.

     Tip:

     To learn more about default classes and view an example, select the SQL Query attribute in the Property Editor and click the Help tab in the central pane.

8. Edit the calendar Attributes.

   • In the Rendering tab, locate the Calendar region and click Attributes.

     The Property Editor displays the calendar Attributes.

   • Edit the calendar Attributes:

     • Settings, Display Column - Select the column which holds the text displayed for events on this calendar.

     • Settings, Start Date - Select the column which holds the start date for events displayed on this calendar.

9. Click Save.

   See Also:

   "Managing Calendar Attributes in Page Designer"

Once you create a calendar, you can alter the display by editing attributes in the Properties Editor. Each calendar has two sets of editable attributes: region attributes and calendar attributes. Region attributes define the area of the page which functions as a container for the calendar. Calendar attributes specify the template, date columns, and general calendar formatting.

Topics:

• Editing Calendar Attributes in the Property Editor
  
• Editing an Existing Calendar to Include Add and Edit Functionality
  
• Adding Calendar Initialization JavaScript Code
  
• Enabling the Dragging and Dropping of Data In an Existing Calendar
  

Dynamic actions provide a way to define complex client-side behavior declaratively without the need for JavaScript. Using the Dynamic Action Create wizard, you specify an action that is performed when a defined set of conditions occur. You can also specify which elements are affected by the action, and when and how they are affected.

When working with dynamic actions, you should be mindful of the fact that the more dynamic actions you add to a page, the greater your overall page size. This is because the dynamic action framework emits additional code to the client for each dynamic action defined, which then also must be downloaded and executed by the framework in the client.

Dynamic actions contain a condition that can be specified to control the action. Oracle Application Express components such as reports or charts can react the specific calendar events. For example, if you view a calendar and click a button to view a subsequent month, you can create a dynamic action to automatically refresh an associated report.

To use this feature the developer creates a new dynamic action on the Calendar page in Page Designer. Select the new dynamic action in the Dynamic Action tab in the left pane of Page Designer. Once created, the new dynamic action displays in red with the label New. Then, the developer edits the dynamic action attributes in the Property Editor. In Property Editor, locate and expand When attribute. Under the When attribute, for Event, select one of the following events:

• Date Selected [Calendar]

  This event fires when the user selects an empty date or date range either with the mouse or with the keyboard. If the developer provides a "create link" in the calendar attributes, no event fires.

  Information about the current view is being passed as the "data" object:

  { "newStartDate"::: "newEndDate"::: }
  
  { "newStartDate":{first day of selection} (YYYYMMDDHH24MISS),
   "newEndDate": {last day of selection} YYYYMMDDHH24MISS }
  

• Event Selected [Calendar]

  This event fires when the user clicks an existing event with the mouse or selects it with the keyboard. When the developer provided an "edit link" in the Calendar attributes, no event is being fired. The "data" object contains the jQuery FullCalendar JSON representation of the event.

  See Also:

  Full Calendar documentation Event Data, "Event Object"

• View Changed [Calendar]

  This event fires when either the view type changes (day, week, month, list) or when the view changes to its previous or next view page. The "data" object contains the following information:

  { "viewType": {view type, day, week, month or list},
   "startDate": {first day of view} (YYYYMMDDHH24MISS),
   "endDate": {last day of view} (YYYYMMDDHH24MISS) }