Introduction

The latest version of Oracle APEX (23.2 at the time of writing) introduces an update to a number of JavaScript libraries. One of them, FullCalendar, which is used to generate the calendar region in our application, has been updated to version 6.1.8.

What you may not know is that the previous version of this library included in Oracle APEX was 5.11.3. As you can see, there's a major version change and inevitably this should hide some hidden gems ✨.

New multiMonthYear and dayGridYear views

The announcement blog post of the major version (6.1.0) indicates that two new views are available:

• multiMonthYear that can be used to display a responsive grid of months

• dayGridYear which shows one continuous grid of cells for an entire year

Here are the screenshot from the blog post, looks good right?

How to use it in your Oracle APEX application?

Like some other components, the calendar region can be initialized using a JavaScript Initialization Function attribute. I'd like this new view to be accessible without code, simply by activating/deactivating it using a region attribute, as is the case with the other components. I might open an idea for that 🤔, but in the meantime, here's the code that will allow you to use the multiMonthYear view in your application.

function (config) {
    config.headerToolbar.end = "multiMonthYear"; 
    config.initialView = 'multiMonthYear';
    p.multiMonthMaxColumns = 3; // 3 is the default value but you can test with 1 and 2
}

And here is what it looks like 🤩

You will find a few examples (with code) in the demo page here

Conclusion

In this blog post, we've looked at how to use the new calendar views available in your application from Oracle APEX 23.2. I hope you enjoy this read and that it gives you the idea to take a closer look at the release notes, announcements and documentation, you'd be surprised what you can find!

References

• Calendar Region Upgrade Guide in APEX 21.1 from Daniel Hochleitner

• FullCalendar documentation