Oracle APEX Calendar Region - Beyond the Basics

This article explains how to build a complete Internal Meeting Scheduler using the APEX Calendar with dynamic UI behavior, registration tracking, and strong business validations. .

Oracle APEX PL/SQL JavaScript Calendar Region

Table of Contents

1. Overview & Features
2. Step 1 — Table Design
3. Step 2 — Calendar Page Setup
4. Step 3 — Calendar Attribute Mapping
5. Step 4 — Filter Control
6. Step 5 — Calendar Customization
7. Step 6 — Meeting Details Popup
8. Step 7 — Registration Handling
9. Step 8 — Add New Meeting
10. Step 9 — Save Meeting Logic
11. Step 10 — Register Button Action
12. Step 11 — Department-Based Styling
13. Step 12 — Business Validations

Overview

This solution provides a structured and interactive way to manage internal meetings using Oracle APEX. Here are the key capabilities it offers:

■	Calendar-based session visualization
■	Department-based color coding
■	Filters for Upcoming, Completed, and All sessions
■	Registration and unregistration functionality
■	Audience tracking using a colon-separated format
■	Visual indicators for registered sessions
■	Popup-based session details and creation
■	Strong business rule validations — max 3 sessions per day; no duplicate sessions at the same date and time

---

1

Table Design

Create a table named INTERNAL_MEETINGS to store all session details. The table uses the following columns:

Column	Description
MEETING_ID	Unique identifier for each session
TITLE_DOMAIN	Domain or category of the session
TITLE_NAME	Session topic name
PRESENTER_ID	Presenter identifier
PRESENTER_NAME	Presenter name
PRESENTER_DEPT_NO	Department number (used for color coding)
MEETING_DATE	Scheduled date
MEETING_TIME	Session time
APPROVED_STS	Approval status
AUDIENCE	Colon-separated list of registered users

---

2

Calendar Page Setup

Create a Calendar Region on a new page using the INTERNAL_MEETINGS table. Use the SQL query below as the region source:

SQL — Calendar Region Source

SELECT
  m.meeting_id,
  m.title_domain || ' - ' || m.title_name
    || '||' || NVL(m.meeting_time,   'N/A')
    || '||' || NVL(m.presenter_name, 'N/A')
    || '||' || TO_CHAR(m.presenter_dept_no)
    || '||' || NVL(m.audience,       '')
    || '||' || m.title_domain
    || '||' || CASE
               WHEN INSTR(':' || NVL(m.audience,'') || ':',
                          ':' || :APP_USER || ':') > 0
               THEN 'Y' ELSE 'N'
             END
    || '||' || CASE
               WHEN TRUNC(m.meeting_date) < TRUNC(SYSDATE)
               THEN 'PAST' ELSE 'FUTURE'
             END                           AS event_title,
  TRUNC(m.meeting_date)               AS start_date,
  TRUNC(m.meeting_date)               AS end_date,
  CASE m.presenter_dept_no
    WHEN 10 THEN 'dept-10'
    WHEN 20 THEN 'dept-20'
    WHEN 30 THEN 'dept-30'
    WHEN 40 THEN 'dept-40'
    ELSE        'dept-default'
  END                                 AS css_class_col
FROM internal_meetings m
WHERE m.approved_sts = 'Y'
AND   EXTRACT(YEAR FROM m.meeting_date) = EXTRACT(YEAR FROM SYSDATE)
AND   (
        :P23_CAL_FILTER IS NULL
        OR :P23_CAL_FILTER = 'ALL'
        OR ( :P23_CAL_FILTER = 'UPCOMING'
             AND TRUNC(m.meeting_date) >= TRUNC(SYSDATE) )
        OR ( :P23_CAL_FILTER = 'COMPLETED'
             AND TRUNC(m.meeting_date) <  TRUNC(SYSDATE) )
      )

---

3

Calendar Attribute Mapping

Configure the Calendar attributes in APEX as follows:

Attribute	Value
Display Column	EVENT_TITLE
Start Date Column	START_DATE
End Date Column	END_DATE
Primary Key Column	MEETING_ID
CSS Class Column	CSS_CLASS_COL

---

4

Filter Control

Create a hidden page item P23_CAL_FILTER with a default value of ALL. This item drives the calendar filter dynamically without a page reload, supporting three states:

▶	ALL — Shows every approved session in the current year
▶	UPCOMING — Shows only sessions from today onwards
▶	COMPLETED — Shows only past sessions

---

5

Calendar Customization

Enhance the Calendar using the Initialization JavaScript Function. The customization covers three areas:

Area	Details
Custom Buttons	Upcoming Sessions, Completed Sessions, All Sessions, Add Session
Event Rendering	Time badge display, registered session indicator, tooltip info
Event Click	Opens session details popup, loads dynamic data, controls registration state

---

6

Meeting Details Popup

Create an Inline Dialog region with static ID MEETING_POPUP. It displays:

■	Domain and title
■	Presenter and department
■	Date and time
■	Number of attendees

The register button changes dynamically based on whether the session is in the past or future and whether the user is already registered.

---

7

Registration Handling

Implement an AJAX process to manage registrations. The process handles:

■	Adding a user to the audience list
■	Removing a user from the audience list
■	Returning a UI response for instant feedback
■	Automatically refreshing the Calendar after each action

---

8

Add New Meeting

Calendar Attributes → Create Link → Type: URL → Set URL to javascript:open_region(); to open the "New Scheduled Session" popup region.

Create a popup region with static ID New_Session containing the following input fields:

Field	Purpose
Domain	Session category
Title	Session topic name
Presenter Details	Name and ID of the presenter
Department	Dept number for color coding
Date and Time	Scheduled date and time
Approval Status	Y / N flag for visibility on calendar

The Add Session button in the Calendar toolbar triggers this popup to open.

---

9

Save Meeting Logic

Use an AJAX process to handle saving. The process:

■	Validates all required fields
■	Converts the date format before insert
■	Inserts the record into the INTERNAL_MEETINGS table
■	Returns success or error response to the UI

On success: a confirmation message is shown, the form is cleared, the popup closes, and the Calendar refreshes automatically.

---

10

Register Button Action

A Dynamic Action on the register/unregister button ensures the following:

■	Registration is blocked for past sessions
■	Proper feedback messages are displayed
■	Button state updates to reflect current registration status
■	Calendar stays in sync after every action

---

11

Department-Based Styling

Sessions are visually differentiated on the calendar using department-based CSS classes. A legend is displayed above the Calendar for user reference:

CSS Class	Department	Color
dept-10	Development	Blue
dept-20	Testing	Green
dept-30	Design	Orange
dept-40	Management	Purple
dept-default	Others	Grey

---

12

Business Validations

The following business rules are enforced to maintain data integrity:

Rule	Status
A maximum of 3 sessions per day is allowed	Enforced
Only one session per department per day	Enforced
No duplicate sessions at the same date and time	Enforced
All mandatory fields must be filled	Enforced
Registration is disabled for past sessions	Enforced
Time input must be in a valid format	Enforced

---

Conclusion

Using Oracle APEX, you can build a complete and interactive meeting scheduler with minimal complexity and a highly responsive user experience. This implementation demonstrates how to effectively combine Calendar components, JavaScript customization, and backend processing to create a practical and scalable internal application.

▶ Live Demo 📄 GitHub Code