Skip to main content

Navigating through your APEX Calendar - the easy way

The renewed Calendar Region in APEX is awesome. With just one SQL statement you can provide your users with a calendar view of their data that looks very familiar to what they already know, use and love. Apart from one thing: Navigating to a specific date is cumbersome.
The shortest route is:

  • Navigate to the right month (can be any number of clicks) 
  • Switch to "Week view" 
  • Navigate to the right week (between 0 and 4 clicks) 
  • Switch to "Day view" 
  • Navigate to the right dat (between 0 and 7 clicks)

Way to many clicks!
So how hard can it be to make it easier - more user-friendly? We would like to navigate from both the Month view and the Week view directly into the Day view of a specific date. So with just one click once we have that day in sight.

Dynamic Actions to the rescue. Of course. What else...

First from the Month view to the Day view:
1. Create a Dynamic Action with the specs as shown to the left. Notice the the Event Scope should be "Dynamic" otherwise it wouldn't work after you navigate to another month. This DA will fire upon a click on the TD element that contains the day number in the Month view.
That TD element contains the actual date as a "data" attribute. So we can access it using
$(this.triggeringElement).data().date















2. The Action is a piece of JavaScript:
// Go to the date of the clicked day
$(this.triggeringElement).closest("div.fc").fullCalendar("gotoDate", $(this.triggeringElement).data().date);
// Switch the view to Day view
$(this.triggeringElement).closest("div.fc").fullCalendar("changeView", "agendaDay");
// Kill the Dialog if you have one
setTimeout( function(){ apex.navigation.dialog.cancel(true); }, 1);
That last line is only necessary when you defined a "Create Link" on your Calendar region. And there are probably better, more elegant, ways of solving that.

Second from the Week view to the Day view:
1. Again, create a Dynamic Action. But now use ".fc-agendaWeek-view th.fc-day-header" as the selector.
In the Week view, the date itself is not contained in the header, but in the TD of another table below the headers. So we have to traverse the DOM a bit to get that clicked date.

2. The JavaScript code is:
var clicked = $(this.triggeringElement);
// find the index
var i = clicked.index();
// find the corresponding day and date
var day = $(clicked).closest("div.fc-agendaWeek-view").find("div.fc-bg td.ui-widget-content").eq(i).data().date;

clicked.closest("div.fc").fullCalendar("gotoDate", day );
clicked.closest("div.fc").fullCalendar("changeView", "agendaDay");
setTimeout( function(){ apex.navigation.dialog.cancel(true); }, 1);

The result is elegant and very intuitive:
Try it yourself on : apex.oracle.com

Thanks to Marc Sewtz for helping me out finding the "fullCalendar" methods.


Post a Comment

Popular posts from this blog

Refresh selected row(s) in an Interactive Grid

In my previous post I blogged about pushing changed rows from the dabatase into an Interactive Grid. The use case I'll cover right here is probably more common - and therefore more useful!

Until we had the IG, we showed the data in a report (Interactive or Classic). Changes to the data where made by popping up a form page, making changes, saving and refreshing the report upon closing the dialog. Or by clicking an icon / button / link in your report that makes some changes to the data (like changing a status) and ... refresh the report.  That all works fine, but the downsides are: The whole dataset is returned from the server to the client - again and again. And if your pagination size is large, that does lead to more and more network traffic, more interpretation by the browser and more waiting time for the end user.The "current record" might be out of focus after the refresh, especially by larger pagination sizes, as the first rows will be shown. Or (even worse) while you…

Using multiple Authentication Schemes for your APEX application

Recently someone asked me how he could implement multiple authentication schemes for his APEX application. He would like to use (some kind of) Single Sign-on authentication and - as an alternative - an Application Express Authentication. The problem is ... you can only define one Authentication Scheme being "Current" for an application! So how can we solve this issue?

First, we need te be aware that multiple applications can share their authentication by using the same cookie. Thus if you specify "MYCOOKIE" as the Cookie Name in Application A as well as in Application B, you can switch from A to B and back without the need of logging in again. It doesn't matter what Authentication Scheme Type you are using!

Knowing this, we are halfway our solution. We need two Applications. One - the "real" application - using the Application Express Authentication, let's name this one "LAUNCHPAD". And another one using the Single Sign-on Authentication…

Dockerize your APEX development environment

Nowadays Docker is everywhere. It is one of the main components of Continuous Integration / Continuous Development environments. That alone indicates Docker has to be seen more as a Software Delivery Platform than as a replacement of a virtual machine.

However ...

If you are running an Oracle database using Docker on your local machine to develop some APEX application, you will probably not move that container is a whole to test and production environments. Because in that case you would not only deliver a new APEX application to the production environment - which is a good thing - but also overwrite the data in production with the data from your development environment. And that won't make your users very excited.
So in this set up you will be using Docker as a replacement of a Virtual Machine and not as a Delivery Platform.
And that's exactly the way Martin is using it as he described in this recent blog post. It is an ideal way to get up and running with an Oracle database …