Tag: APEX

Customized APEX 5 Calendar

I had a requirement to create a calendar to track change management data.  I was impressed with the calendar region that comes with APEX 5 and for the most part it met my needs.  I did need to add some additional features and customization to it though to meet the project requirements:

  • Customized color scheme to be in line with corporate standard colors
  • Display a spinner while calendar is loading because of the large quantity of data
  • When viewing data in the agenda list view, return user to the same location in the view after clicking to see detail information
  • Improve the navigation and display when moving between month/week/day views

Customized Color Scheme

Although the APEX calendar does provide some color customization, you are limited to a pallet of pre-defined colors.  In order to use colors outside of this list, you need to use .css.  This can be in-line .css defined for your page or can be in a .css file that you upload to your application.

To define .css entries for the month/day/week calendar views, your entry will look like this:

.fc .fc-event.apex-cal-created {
 background-color: #4F2170;
 border-color: #4F2170;
 color: #FFFFFF;
}

To define .css entries for the agenda view, your entry will look like this:

.fc .fc-agendaList-event.apex-cal-created {
 border-color: #4F2170;
}

After you have defined your .css entries, you will just need to include the name of the class (‘apex-cal-created’ in this example) in a column in your calendar query that you can map to the CSS Class region attribute for your calendar.

Display a Spinner

To display a spinner while the calendar renders, add the following to your page:

In the Function and Global Variable Declaration section of your page add:

myPopup = apex.widget.waitPopup();

Create a Before Refresh dynamic action on your calendar region that executes the following javascript:

myPopup = apex.widget.waitPopup();

Lastly, create an After Refresh dynamic action on your calendar region:

myPopup.remove();

Agenda View Navigation

To help users keep track of where they are at when viewing a long list of agenda view items, you can track the scroll position and return to the position when the page refreshes for example after returning from a detail view.

First create a page item to store the scroll position (P2_SCROLL_TO in this example.)  Create a page load computation to set the page item to 0.

Next create an on click dynamic action for the Jquery selector of .fc-agendaList-item.  This dynamic action will have two actions.  The first action is a set value that will set the value of P2_SCROLL_TO to the javascript expression of:

$(window).scrollTop();

The second is a PL/SQL “dummy” action to submit the value of P2_SCROLL_TO:

plsql

Lastly, create an After Refresh dynamic action on your calendar region (this can be combined with the same After Refresh dynamic action created to display the spinner).  This dynamic action will need two actions.  First execute the following javascript:

var y = $v('P2_SCROLL_TO');
window.scrollTo(0, y);

The second is a set value action to set the value of the P2_SCROLL_TO page item to 0 again.

Improve month/week/day view Navigation

The last piece of my customize was to improve the navigation between the month/week/day views.  For this I followed the steps on Roel Hartman’s Navigating through your APEX Calendar – the easy way post.

You can access the demo application here (credentials guest/demo): Customized Calendar Demo.  Data for this demo begins in November 2017.