10.2.6 Managing Calendar Attributes

Once you create a calendar, you can alter the display by editing attributes in the Property Editor.

Each calendar has two sets of editable attributes: Region attributes and calendar Attributes.

• Editing Calendar Attributes in the Property Editor
  Access calendar attributes in the Property Editor.
• Editing an Existing Calendar to Include Add and Edit Functionality
  Edit and existing calendar to include add and edit functionality.
• Adding Calendar Initialization JavaScript Code
  Add a JavaScript function to override the standard jQuery FullCalendar initialization attributes by editing the Initialization JavaScript Code attribute.
• Enabling the Dragging and Dropping of Data in an Existing Calendar
  The Calendar Region supports moving or changing calendar events with drag and drop.

10.2.6.1 Editing Calendar Attributes in the Property Editor

Access calendar attributes in the Property Editor.

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.

To edit calendar Attributes:

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. In the Rendering tab, locate and select the calendar.
   The Property Editor displays two tabs: Region and Attributes.
3. In the Property Editor, select the appropriate tab:
   • Region - Region attributes define the area of the page which functions as a container for the calendar.
   • Attributes - Calendar Attributes specify the template, date columns, and general calendar formatting.
4. Edit the calendar attributes.

   To view help for an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

5. To save your changes click Save. To save and run the page, click Save and Run Page.

10.2.6.2 Editing an Existing Calendar to Include Add and Edit Functionality

Edit and existing calendar to include add and edit functionality.

Tip:

When defining calendar create and edit links for Desktop applications, Oracle recommends defining two separate pages. To create an Edit Link, select one of the table or SQL query columns as the Primary Key Column in the Calendar attributes.

To edit an existing calendar to include add and edit functionality:

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. In the Rendering tab, locate and select the calendar.
3. In the Property Editor, click the Attributes tab.
   The Property Editor displays the calendar Attributes.
4. Edit Settings, Create Link to specify a target page to call when the user clicks an empty cell or an existing calendar entry.

   1. Settings, Create Link - Click No Link Defined.

      The Link Builder - Create Link dialog appears.

   2. Type - Select the type of link target.

   3. Application - If you select Page in a different application, enter the application ID.

   4. Page - Specify the target page number.

   5. Set Items - Configure the values to be passed from the calendar to the target page. The Create Link is called after a date or date range has been selected in the calendar. Therefore, the selected start and end dates must be passed to the Create Page.

      • To pass the selected date or the start date of a selected date range:

        • Name - Specify the name of the target page item containing the start date of the event. If a form, this should be a date picker element.

        • Value - &APEX$NEW_START_DATE.

      • When a date range has been selected, pass the end date as follows:

        • Name - Specify the name of the target page item containing the end date of the event. For a form, this should be a date picker element.

        • Value - &APEX$NEW_END_DATE.

          You can pass additional values in the same way as any other link to an application page.

        • Click OK.

   Tip:

   To learn more about an attribute, select the attribute in the Property Editor and click the Help tab in the center pane.

5. Edit Settings, Edit Link to define a target page to be called when the user clicks an existing entry.

   Tip:

   To create an Edit Link, you must pass a primary key value to the target page in order for the form to look up the table row.

   1. Settings, Edit Link - Click No Link Defined.

      The Link Builder - Create Link dialog appears.

   2. Type - Select the type of link target.

   3. Application - If you select Page in a different application, enter the application ID.

   4. Page - Specify the target page number.

   5. Set Items - Configure the values to be passed from the calendar to the target page. The Create Link is called after a date or date range has been selected in the calendar. Therefore, the selected start and end dates must be passed to the Create Page.

      • Name - Specify the name of the target page item containing the primary key value; typically a hidden item, for example:

        PX_ID.

      • Value - Specify the table or SQL query column containing the primary key value, for example:

        &ID.

      • Click OK.

6. Click Save.

10.2.6.3 Adding Calendar Initialization JavaScript Code

Add a JavaScript function to override the standard jQuery FullCalendar initialization attributes by editing the Initialization JavaScript Code attribute.

Note that the function must return a JavaScript Object containing the calendar initialization attributes as parameters.

To add initialization JavaScript code:

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. In the Rendering tab, locate and select the calendar.
   The Property Editor displays Region attributes.
3. In the Property Editor, click the Attributes tab.
   The Property Editor displays the calendar Attributes.
4. Find Advanced.

   Tip:

   To search for a group or an attribute, enter a keyword in the Filter Properties field. The groups and attributes containing the term appear.

5. In Advanced, Initialization JavaScript Code, enter a JavaScript function to override the standard jQuery FullCalendar initialization attributes.

   Example: Calendar based FullCalendar v5:

   function ( pOptions) {
       pOptions.slotMinTime            = "07:00:00";                                               // hide slots before minTime
       pOptions.slotMaxTime            = "21:00:00";                                               // hide slots after maxTime
       pOptions.dayHeaderFormat        = { weekday: 'short', month: 'numeric', day: 'numeric' };   // week view column headings
       pOptions.slotDuration           = "00:15:00";                                               // custom slot duration
       pOptions.weekNumbers            = true;                                                     // show week numbers
       pOptions.weekText               = "CW";                                                     // heading for week numbers
       pOptions.weekNumberCalculation  = "ISO";                                                    // use "ISO" week numbers
       pOptions.displayEventTime       = true;                                                     // show event time ...
       pOptions.displayEventEnd        = false;                                                    // ... but not the end time
       pOptions.disableKeyboardSupport = true;                                                     // disable builtin keyboard navigation
       pOptions.windowResize           = null;                                                     // suppress automatic switch to list view on small screens
       return pOptions;
   }

   Example: Calendar based FullCalendar v3 (Deprecated):

   function ( pOptions) {
       pOptions.titleFormat      = "[Conference Schedule]";                  // custom title
       pOptions.minTime          = "07:00:00";                               // hide slots before minTime
       pOptions.maxTime          = "18:00:00";                               // hide slots after maxTime
       pOptions.columnFormat     = {month: '', week: 'dddd', day: 'dddd'};   // week view column headings
       pOptions.slotDuration     = "00:15:00";                               // custom slot duration
       pOptions.weekNumbers      = true;                                     // show week numbers
       pOptions.weekNumberTitle  = "CW";                                    
       return pOptions;
   }

   Tip:

   Calendars based on FullCalendar v3 have been deprecated and will be desupported in a future release.

6. Click Save.

10.2.6.4 Enabling the Dragging and Dropping of Data in an Existing Calendar

The Calendar Region supports moving or changing calendar events with drag and drop.

To enable support for drag and drop for a calendar region:

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. In the Property Editor, click the Attributes tab.
   The Property Editor displays the calendar Attributes.
3. Find Settings and edit the following attributes:

   1. Settings, Primary Key Column - Select a table or SQL Query column.

      The Drag and Drop field appears in the Property Editor, below Additional Calendar Views.

   2. Settings, Drag and Drop - Select On.

      Drag and Drop PL/SQL Code appears.

   3. Settings, Drag and Drop PL/SQL Code - Enter the PL/SQL code to execute when the end user finishes a drag and drop for an event.

       Within the PL/SQL code, you can reference the ID of the dragged event, the new start, and end end dates as:

      :APEX$PK_VALUE, :APEX$NEW_START_DATE amd :APEX$_NEW_END_DATE

      For example, the following code changes the event row in the PROJECTS table after the end user has dragged the event to a new date.

      begin
           update projects
              set start_date = to_date(:APEX$NEW_START_DATE, 'YYYYMMDDHH24MISS'),
                  end_date = to_date(:APEX$NEW_END_DATE, 'YYYYMMDDHH24MISS')
            where id = :APEX$PK_VALUE;
       end;

      To learn more, click the Help tab in the central pane.

4. Click Save.