APEX

In APEX 20.2, I was using FullCalendar v3 js file and we created calendar UI using js and it works fine but there are some features which work in latest FullCalendar version. When I checked Oracle New Features page, I found that it has v6.1.20.

So, my question is can I create similar UI using inbuilt Calendar control?

Here is my JS code which I used in old version but as a custom JS

var gData;
var myPopup;
apex.server.process(
"GET_PLANNER_LIST",
{
x01: 1,
},
{
success: function (gData) {
var todayDate = moment().startOf("day");
var YESTERDAY = todayDate.clone().subtract(1, "day").format("YYYY-MM-DD");
var TODAY = todayDate.format("YYYY-MM-DD");
var TOMORROW = todayDate.clone().add(1, "day").format("YYYY-MM-DD");

var src_data = gData;
var VJSON = gData.PLANNER_LIST;

const currentView = apex.item("P700_CURRENT_VIEW").getValue()
? apex.item("P700_CURRENT_VIEW").getValue()
: "timelineDay";

$("#calendar").fullCalendar({
timeFormat: "hh:mm a",
schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
now: TODAY, //'2017-03-28',
editable: true, // enable draggable events
aspectRatio: 1.8,
scrollTime: "00:00", // undo default 6am scrollTime
header: {
left: "today prev,next, createtask",
center: "title",
right: "timelineDay,timelineThreeDays,month", // 'timelineDay,timelineThreeDays,agendaWeek,month,agendaFourDay'
},
defaultView: currentView,
eventLimit: {
month: 4,
timelineThreeDays: 3,
},
//eventLimitText: 'more',
views: {
timelineThreeDays: {
type: "timeline", //timeline
duration: {
days: 7,
},
slotDuration: "24:00",
eventLimit: true,
},
},
customButtons: {
createtask: {
text: "Create task",
id: "create_task",
click: function () {
var PageURL = "";
PageURL =
"f?p=" +
$v("pFlowId") +
":859:" +
$v("pInstance") +
":::859:P859_PAGE:700";
apex.server.process(
"GETCHECKSUMURL",
{
p_arg_names: ["APP_ITV_CS_URL"],
p_arg_values: [PageURL],
},
{
dataType: "text",

success: function (data) {
eval(
data.replace(
"width:'920'",
"height:'960'",
"id:'id_page'"
)
);
$(".t-Dialog-page--standard .t-Dialog-page--standard").html(
"Add Task"
);
},
}
);
},
},
},
resourceLabelText: "Users",

resources: VJSON,
resourceRender: function (resourceObj, labelTds, bodyTds) {
if (resourceObj.name || resourceObj.email) {
labelTds.qtip({
content:
'<table border="0" cellpadding="1" cellspacing="1" class="schedule-tile-title"><tbody><tr><td style="text-align: left;"><strong>Name:&nbsp;</strong></td><td>' +
resourceObj.name +
'</td></tr><tr><td style="text-align: left;"><strong>Email:&nbsp;</strong></td><td>' +
resourceObj.email +
'</td></tr><tr><td style="text-align: left;"><strong>Address:&nbsp;</strong></td><td>' +
resourceObj.addr +
"</td></tr></tbody>\n</table>",
style: {
classes: "qtip-bootstrap qtip-rounded qtip-shadow",
},
position: {
my: "bottom middle",
at: "top middle",
target: "mouse",
adjust: {
mouse: false,
},
},
});
}
},

/*TJSON,*/
events: function (start, end, timezone, callback) {
//console.log("Event Start Date: "+moment(start).format('DD-MMM-YYYY HH:mm:ss'));
//console.log("Event end Date: "+moment(end).format('DD-MMM-YYYY HH:mm:ss'));
apex.server.process(
"GET_TASK_LIST",
{
x01: moment(start).format("DD-MMM-YYYY"),
x02: moment(end).format("DD-MMM-YYYY"),
},
{
success: function (pData) {
console.log("Event Success: " + pData);
//pData =JSON.parse(pData);
$("#apex_wait_popup").remove();
$("#apex_wait_overlay").remove();
callback(pData);
},
}
);
},
eventClick: function (event) {
if (event.url) {
window.open(event.url);
return false;
}
},
eventAfterRender: function (event, element) {
var vHoldTd = "";
var start = event.start;
var end = !event.end ? event.start : event.end;
if (event.holding) {
var vHoldingNm = event.holding.substring(
0,
event.holding.indexOf("~@~")
);
var vHoldingColor = event.holding.substring(
event.holding.indexOf("~@~") + 3
);
vHoldTd =
'<tr><td colspan="2" style="text-align: center;background-color: ' +
vHoldingColor +
'"><B>' +
vHoldingNm +
"</B></td></tr>";
}
var vPriority = !event.tpriority ? "" : event.tpriority;
var vunm = !event.username ? "" : event.username;
var vContributor = !event.contributor ? "" : event.contributor;

element.qtip({
content:
'<table border="0" cellpadding="1" cellspacing="1" class="schedule-tile-title"><tbody><tr><td style="text-align: left;"><strong>Task #:&nbsp;</strong></td><td>' +
event.id +
'</td></tr><tr><td style="text-align: left;"><strong>Subject:&nbsp;</strong></td><td>' +
event.title +
'</td></tr><tr><td style="text-align: left;"><strong>Type:&nbsp;</strong></td><td style="background-color: ' +
event.color +
'">' +
event.ttype +
'</td></tr><tr><td style="text-align: left;"><strong>Status:&nbsp;</strong></td><td>' +
event.tstatus +
'</td></tr><tr><td style="text-align: left;"><strong>Priority:&nbsp;</strong></td><td>' +
vPriority +
'</td></tr><tr><td style="text-align: left;"><strong>Start:&nbsp;</strong></td><td>' +
moment(event.start).format("DD-MMM-YYYY h:mm a") +
'</td></tr><tr><td style="text-align: left;"><strong>End:&nbsp;</strong></td><td>' +
moment(end).format("DD-MMM-YYYY h:mm a") +
'</td></tr><tr><td style="text-align: left;"><strong>Owner:&nbsp;</strong></td><td>' +
vunm +
'</td></tr><tr><td style="text-align: left;"><strong>Contributor:&nbsp;</strong></td><td>' +
vContributor +
"</td></tr>" +
vHoldTd +
'<tr><td colspan="2" style="text-align: center;">Click for more details..</td></tr></tbody>\n</table>',
style: {
classes: "qtip-bootstrap qtip-rounded qtip-shadow",
},
position: {
my: "bottom middle",
at: "top middle",
target: "mouse",
adjust: {
mouse: true,
},
},
});
},
//});
//}
loading: function (isLoading) {
//console.log("true :"+isLoading);
if (isLoading) {
$("#loading").show();
//apex.widget.waitPopup();
myPopup = apex.widget.waitPopup();
} else {
$("#loading").hide();
//$("#apex_wait_popup").remove();
//$("#apex_wait_overlay").remove();
myPopup.remove();
}
},
eventResize: function (event, delta, revertFunc) {
console.log(
"eventResize....." +
event.title +
" end is now " +
event.end.format()
);
//alert(event.title + " end is now " + event.end.format());
updateTask(event, revertFunc);
//if (!confirm("is this okay?")) {
// revertFunc();
//}
},
eventDrop: function (event, delta, revertFunc) {
console.log(
"eventDrop....." +
event.title +
" was dropped on " +
event.start.format()
);

//alert(event.title + " was dropped on " + event.start.format());
updateTask(event, revertFunc);

//if (!confirm("Are you sure about this change?")) {
//revertFunc();
//}
},
});
},
}
);