Lately I’ve been exploring all the options of the Oracle APEX Calendar, also known as the FullCalendar version 5.

I would like to share some of my findings and tips with you!

First things first. To be able to load calendar options, it’s always nice to get the full API documentation available for the fullCalendar. As of now, most APEX versions use the 5th version; https://fullcalendar.io/docs/v5#toc.

Oracle APEX has a lot of main options you can set, regulate and alter to be able to get a nice use out of the calendar. But for me, it just didn’t feel like enough. In the Calendar items “Attributes” tab, there is an option “Advanced” with “Initialization JavaScript Function”. The help text here is already giving us some options to initialise the calendar for our benefit, but there are a lot more awesome options!

To be able to initialise the calendar, we need a function with 1 parameter, we will use pOptions in this example.

function (pOptions) {   

    //If you like to know what pOptions contains, uncomment below
    //console.log(pOptions);
   
    //set options 
    .....

    //return pOptions
    return pOptions;
}

Below are a couple of options I like to use standard for displaying my calendar defaultly. You can click the options below to go directly to the documentation. First I like to be able to change the default view, only display certain time slots and not displaying any unnecessary empty rows like full day events or the header toolbar.

//Initial date you want the calendar to open with. Use yyyy-mm-dd format
pOptions.initialDate =  "2024-02-06"; 
//Initial view to be displayed. 
pOptions.initialView = "timeGridDay";
//Minimum & maximum time on the view of the calendar, all time before is not shown!
pOptions.slotMinTime = "08:30:00";     // hide slots before minTime    pOptions.slotMaxTime = "20:00:00"; 
//Determines if you want the possibility to have full day events. When this is off it will not be displayed.
pOptions.allDaySlot = false; 
//Hide day header toolbar
pOptions.dayHeaders = false;

The last option is the one I like the most! If you don’t use it events in your calendar are sorted defaultly by title, but you can alter this by using eventOrder.

pOptions.eventOrder = "column1,column2";

Once we know all this, we can get into the more customization for the calendar. First, let’s create a custom title, note that each calendar view has it’s own default, but we can alter this. the option titleFormat can be used to alter this. This can either be an Object or a function with 1 parameter (not so well documented) . Since I like to have a full example of how to display text with the current date, the function option is shown below.

pOptions.titleFormat = function(pDate) { 
                             return "Any text! The date is: "  
                                  + pDate.date.day 
                                  + "-" + pDate.date.month 
                                  + "-" + pDate.date.year
                       };

You are able to format dates to display. To know all the options of the pDate param just add console.log(pDate);

Next, it’s nice to be able Getting the calendar selector / widget for usage after load, this can be handy for custom buttons, or to get / set / load after load.

var calendar = apex.region("#static_region_id#").widget().data("fullCalendar");

To be able to create custom buttons you can add the following option(s):

pOptions.customButtons =  {
        Button1: { 
            text: 'Display alert!',
            click: function() { 
                alert('Yeay! You clicked the button!');
            }
        },
        Button2: {
            text: 'Back to the Future!',
            click: function() {
                var calendar = apex.region("calID").widget().data("fullCalendar");
                calendar.gotoDate("2015-10-21");
            }
        }
    }

Finally, we can design the headerToolbar, here we can tell which buttons we would like to display and where.

pOptions.headerToolbar = {
        start: 'Button1, Button2', //The custom buttons
        center: 'title', //Default title or titleFormat 
        end: 'today prev,next' 
    };

If we put it all together, we can use the following code in out “Initialization JavaScript Function”

function (pOptions) { 
    //If you like to know what pOptions contains, uncomment below
    //console.log(pOptions);
   
    //set options 
    pOptions.initialDate =  "2024-02-06"; 
    pOptions.initialView = "timeGridDay";
    pOptions.slotMinTime = "08:30:00";     // hide slots before minTime      
    pOptions.slotMaxTime = "20:00:00"; 
    pOptions.allDaySlot = false; 
    pOptions.dayHeaders = false;
    pOptions.eventOrder = "column1, column2";
    pOptions.titleFormat = function(pDate) { 
                             return "Any text! The date is: "  
                                  + pDate.date.day 
                                  + "-" + pDate.date.month 
                                  + "-" + pDate.date.year
                          };
    pOptions.customButtons =  {
        Button1: { 
            text: 'Display alert!',
            click: function() { 
                alert('Yeay! You clicked the button!');
            }
        },
        Button2: {
            text: 'Back to the Future!',
            click: function() {
                var calendar = apex.region("calID").widget().data("fullCalendar");
                calendar.gotoDate("2015-10-21");
            }
        }
    } 
    pOptions.headerToolbar = {
        start: 'Button1, Button2', //The custom buttons
        center: 'title', //Default title or titleFormat 
        end: 'today prev,next' 
    };

    //return pOptions
    return pOptions;
}

Related Posts