Introduction: –
This document is about how to customize calendar using APEX API in Oracle APEX. FullCalendar5 is a powerful JavaScript library for displaying and managing event calendars on web applications. It is fully customization and supports various views such as day, week, month, and agenda views. In Oracle APEX, it can be integrated to enhance application interactivity and user experience for managing schedules, appointments, or events.
The following technologies have been used to customize calendar template using APEX API in Oracle APEX.
- PL/SQL
- CSS
- Javascript
- Oracle APEX
Why we need to do: –
If the requirement arises to customize the calendar for their business need like displaying weekly label with list color customization based on its meeting/event status and system date.
How do we solve:
The following steps will help to customize calendar in Oracle APEX
Step 1: Create a calendar region and use Table(Training date) as source.
Step2: Choose the display column to show as an events in the calendar region.
Step 3: To add tooltip which act as a supplemental information, use the below code.
Code:
&TRAINER_NAME.
(&TRAINER_DESIGNATION.)-
&DEPTNAME.
Step 4: To drag and drop the event, we can use the Drag and Drop PL/SQL Code in the attribute section.
Update trainingdate set trainingdate=(TO_DATE(:APEX$NEW_START_DATE,’YYYYMMDDHH24MISS’))
WHERE “SI.NO”=:APEX$PK_VALUE;
END;
Step 4: To customize event color we can use the following CSS code in the inline code section.
Code:
.fc-event-past {
border-color: rgb(168 176 50);
color: rgb(236, 232, 232);
background-color: green;
}
.fc-event-today {
border-color: rgb(168 176 50);
color: rgb(190, 20, 20);
background-color: rgb(23, 0, 128);
}
.fc-event-future {
border-color: rgb(168 176 50);
color: rgb(190, 20, 20);
background-color: rgb(216, 95, 25);
}
Step 4: To customize event color we can use the following CSS code in the inline code section.
Code:
function(pOptions){
pOptions.slotMinTime =”7:00:00”;
pOptions.slotMaxTime=”2:32:00”;
pOptions.dayHeadFormat={
weekday:’short’,
day:’numeric’,
month:’numeric’,
}
pOptions.slotDuration=”00:15:00”;
pOptions.weekNumbers=true;
return pOptions;
}
Conclusion:
In summary, the JET chart API provides a flexible way to enhance the functionality of charts in Oracle APEX, allowing for customization’s such as adding markers, series properties, highlighting patterns etcFullCalendar5 is a powerful JavaScript library for displaying and managing event calendars on web applications. It is fully customization and supports various views such as day, week, month, and agenda views. In Oracle APEX, it can be integrated to enhance application interactivity and user experience for managing schedules, appointments, or events. So using this JET framework calendar templates can be customized with Oracle APEX ecosystem.
