04 February, 2014

You don't have to wait for APEX 5 for FullCalendar Integration

One of the MANY nice things that is coming in APEX 5.0 is the native integration of the jQuery based FullCalendar, known in the APEX 5.0 Builder as the CSS Calendar. While the native integration will be nice, you shouldn't have to wait for APEX 5.0 for this functionality.

Enter the Enkitec FullCalendar plugin. We integrated FullCalendar into our website quite some time ago to enable us to display our Education and Conference calendars. Recently I've taken the basis for that code and created a plug-in that works with APEX 4.1 and 4.2.

The plugin allows the developer to decide the following:

  • The jQuery UI Theme to be used to render the calendar
  • What the header of the Calendar contains and where
    • Navigation
    • Title
    • View
  • Which calendar views, in addition to MONTH, the end user sees (Week and/or Agenda/Day)
  • Whether or not the day is considered an "All-Day" event
  • Styling for each individual event
    • Either event_color and text_color or a CSS Class to be assigned.
  • Tool Tip text to display when an end user hovers over the event in the calendar
  • Hight & Width of the Calendar
  • Which day should be considered the first day of the week

While there are still things I want to do to this plug-in, I thought I’d go ahead and release it so that the APEX community could start using it now.  

Will the plug-in continue to be developed once 5.0 is finally released? I suppose that depends on whether the APEX team implements the same of better functionality than what I’ve managed to do so far. 

In the mean time you can download the plug-in from here:  http://www.enkitec.com/products/plugins/fullcalendar

9 comments:

John Reilly said...

Doug:

I like this plugin very much and have already used it to show different events in different colors on a merged calendar. I am trying to get it to work with some "filtering" based on select lists (with multiple selections). It works fine with radio groups (which have the "Redirect and set value option" but I can't seem to get it to refresh via a dynamic action. I checked the plugin Has "Page Items to Submit" Attribute and made sure that the page items that I am using to "filter" the calendar were listed in the "Page Items to Submit" field.

I can get the calendar to properly display only the calendar items that match the filters selected if I submit the page - any thoughts on how to get the calendar to do a partial page refresh?

Using Application Express 4.2.4

John Reilly said...
This comment has been removed by a blog administrator.
Doug Gault said...

Hi John,

The problem, I believe, is that the plugin is not set up to be registered for the REFRESH event.

If you look at this thread:

https://community.oracle.com/message/4442627

Patrick Wolf talks about how to set up a plugin to respond to the refresh event. It'll be a while before I can get to this to update the plugin, but you may be able to do this yourself.

Hope this helps.

Thanks

Doug

Raymond said...

Hi Doug,

What happend to drag and drop in the plug-in? Or did I miss something?

John Ramuta said...

Doug -
I've run into a problem that I'm hoping you can clarify. I'm using the jquery menu plug-in for APEX to handle my multi-level menus. However, when the calendar is displayed and I click on the pull down menu, any part of the menu that falls onto the calendar is not selectable, almost as if the menu was going "behind" the calendar. I can see the menu, I just can't select anything in it. Any thoughts?

Doug Gault said...

This is most likely a Z-Index problem. A great tool to help debug Z-index issues is built in to FireFox. Press Ctrl+Shift+I inside any webpage, and then click the ‘3D View’ button (looks like a 3D Box) in the tool-bar in the upper right.

The 3D View might not be enabled by default. You may need to click on the options (gear) icon and turn it on.

That should help you figure out if it's a Z-index issue or not.

Thanks

John Ramuta said...

It appears you're correct, and that I need to adjust the z-value. Now I just have to figure out how, and where. My skills with HTML still aren't what they should be. I either have to bring the menu, which is set up on page 0, and is replicated on all pages, to the front, or push the calendar behind it. Any suggestions would be welcome.

John Ramuta said...

Got it! To the page with the calendar, I added an entry in the Inline CSS area:

.fg-menu-container {z-index:10);

And that took care of it by bringing the menu to the top.

Thanks for the pointer to the z-index. It would have taken me a while to track that down.

John

Doug Gault said...

Raymond. I didn't implement the Drag & Drop in this version of the plugin and I probably won't seeing that APEX 5 will include this natively.