Greetings to all,
I find myself in a quandary and would greatly appreciate your assistance. For a particular event, I am dealing with four distinct dates: the start date, hla_start date, hla_end date, and the end date.
When attempting to resize my event, I am able to adjust the start and end dates without issue. However, I am encountering difficulty when trying to trigger the hla_start or hla_end dates.
For your reference, I have included a screenshot and the relevant code. I am hopeful that someone might be able to provide a solution to this predicament. Thank you in advance for your time and consideration.
onBeforeEventRender: function(args) {
var html = args.data.html;
args.data.html = "";
args.data.barHidden = true;
args.data.resizeDisabled = false;
// Assuming hlaStart and hlaEnd are Date objects
const startDate = args.data.start instanceof Date ? args.data.start : new Date(args.data.start);
const endDate = args.data.end instanceof Date ? args.data.end : new Date(args.data.end);
const hlastartDate = args.data.hla_start instanceof Date ? args.data.hla_start : new Date(args.data.hla_start);
const hlaendDate = args.data.hla_end instanceof Date ? args.data.hla_end : new Date(args.data.hla_end);
const startDay = startDate.toLocaleDateString(undefined, { day: 'numeric' });
const endDay = endDate.toLocaleDateString(undefined, { day: 'numeric' });
const hlaStartDay = hlastartDate.toLocaleDateString(undefined, { day: 'numeric' });
const hlaEndDay = hlaendDate.toLocaleDateString(undefined, { day: 'numeric' });
const pointA = new DayPilot.Date(args.data.start);
const pointD = new DayPilot.Date(args.data.end);
var hlaStart = new DayPilot.Date(args.data.hla_start);
var hlaEnd = new DayPilot.Date(args.data.hla_end);
// Calculate differences directly for hlaStartOr and hlaEndOr
const pointADiff = hlaStart.getTime() - pointA.getTime();
const pointDDiff = pointD.getTime() - hlaEnd.getTime();
// Convert differences to days and round to the nearest whole number
const daysInMilliseconds = 1000 * 60 * 60 * 24;
const diffPointA = Math.round(pointADiff / daysInMilliseconds);
const diffPointD = Math.round(pointDDiff / daysInMilliseconds);
//cell size
const cellWidth = 20;
//deliver x for A et D
const A = diffPointA * cellWidth - 10;
const D = diffPointD * cellWidth;
var loadingColor = args.data.backColor || "#a61c00"; // Use the loading color, or a default color if not set
args.data.backColor = "transparent";
args.data.borderColor = "transparent";
args.data.areas = [
{
start: args.data.start,
end: hlaStart, // Changed from args.data.start
top: 45,
bottom: 45,
backColor: "black", // Black line design
html: `<div style='height: 2px; background-color: black; width: 100%;'></div><div style='margin-top: 30px; margin-left: ${A}px; text-align: left;'>${hlaStartDay}</div>`,
action: "ResizeStart", // Set the action to "ResizeStart"
},
{
start: hlaEnd,
end: args.data.end,
top: 45,
bottom: 45,
backColor: "black", // Black line design
html: `<div style='height: 2px; background-color: black; width: 100%;'></div><div style='margin-top: 30px; margin-right: ${D}px; text-align: right;'>${hlaEndDay}</div>`,
action: "ResizeEnd",
},
{
start: hlaStart,
end: hlaEnd,
top: 30,
bottom: 30,
backColor: loadingColor,
style: "color: black; display: flex; justify-content: center; align-items: center; border: 1px solid black;",
html: html || args.data.text,
},
{
start: hlaStart,
width: 30,
top: 30,
bottom: 30,
html: "<div class='hla-start-marker'>|||</div>",
style: "color: #000; display: flex; justify-content: center; align-items: center; padding-left: 12px; transition: color 0.3s;",
action: "ResizeHlaStart",
data: "ResizeHlaStart",
className: "hla-start-marker-area",
},
{
end: hlaEnd,
width: 30,
top: 30,
bottom: 30,
style: "color: #000; display: flex; justify-content: center; align-items: center; padding-right: 12px",
action: "ResizeHlaEnd", // Change this to match the switch statement
className: "hla-end-marker-area", // Add a class for identification
},
];
args.data.originalStart = args.data.start;
args.data.originalEnd = args.data.end;
args.data.originalhla_start = hlaStart;
args.data.originalhla_end = hlaEnd;
},
// for filter per aircraft
onEventFilter: (args) => {
if (args.e.text().toUpperCase().indexOf(args.filter.toUpperCase()) === -1){
args.visible = false;
}
},
// when click event trigger the action
onEventClick: (args) => {
DayPilot.Modal.alert(args.e.data.text);
},
// resize the time on the event
onEventResize: function(args) {
const resizedEvent = args.e;
const test = args.areaData;
// Check if new start and end are defined
if (args.newStart === undefined || args.newEnd === undefined) {
alert('Resize action is undefined');
return;
}
// Check if hla_start is smaller than start
if (args.action === 'ResizeHlaStart' && args.newStart < resizedEvent.start()) {
alert('Cannot resize Hla Start smaller than the event start');
// Display a message or handle the case as needed
return;
}
if (args.newStart !== resizedEvent.start()) {
// ResizeStart action
handleResizeStart(resizedEvent, args);
} else if (args.newEnd !== resizedEvent.end()) {
// ResizeEnd action
handleResizeEnd(resizedEvent, args);
} else if (args.action === 'ResizeHlaStart') {
// ResizeHlaStart action
handleResizeHlaStart(resizedEvent, args);
} else {
// Unknown resize action
alert('Unknown resize action');
}
//
},
onEventMove: function(args) {
const movedEvent = args.e;
var res = movedEvent.data.line_id ;
// Check if new start and end are defined
if (args.newStart === undefined || args.newEnd === undefined) {
alert('Move action is undefined');
return;
}
const hlaStartOr = new Date(movedEvent.data.hla_start);
const hlaEndOr = new Date(movedEvent.data.hla_end);
const newDateStart = args.newStart;
const newDateEnd = args.newEnd;
const newLineId = args.newResource;
const originalStartDate = new Date(movedEvent.data.start);
const originalEndDate = new Date(movedEvent.data.end);
// Calculate differences directly for hlaStartOr and hlaEndOr
const startDifference = args.newStart.getTime() - originalStartDate.getTime();
const endDifference = args.newEnd.getTime() - originalEndDate.getTime();
// Convert differences to days and round to the nearest whole number
const daysInMilliseconds = 1000 * 60 * 60 * 24;
const startDifferenceInDays = Math.round(startDifference / daysInMilliseconds);
const endDifferenceInDays = Math.round(endDifference / daysInMilliseconds);
console.log('hla diff start:', startDifferenceInDays);
console.log('hla diff end:', endDifferenceInDays);
// Apply differences to hlaStartOr and hlaEndOr
hlaStartOr.setTime(hlaStartOr.getTime() + startDifference);
hlaEndOr.setTime(hlaEndOr.getTime() + endDifference);
// Format hlaStartOr and hlaEndOr in "YYYY-MM-DD HH:mm:ss" format
const formattedNewHlaStart = hlaStartOr.toISOString().slice(0, 19).replace("T", " ");
const formattedNewHlaEnd = hlaEndOr.toISOString().slice(0, 19).replace("T", " ");
console.log('hla new start:', formattedNewHlaStart);
console.log('hla new end:', formattedNewHlaEnd);
// Display a confirmation popup
if (confirm(`Do you want to move the event to ${args.newStart} - ${args.newEnd}?`)) {
// Update the database with the new start and end dates
updateEventInDatabase(movedEvent, args, formattedNewHlaStart, formattedNewHlaEnd, newDateStart, newDateEnd, newLineId);
} else {
// If the user cancels the move, revert the changes
dp.events.update([movedEvent]); // Assuming you have a way to revert the event to its original state
}
},
Furthermore i tried with this value using args.areaData in onEventResize, onEventResized, and onEventResizing. But can’t make it.
Of course i use the last version 2024.1.5888
Definetly Thanks you for your hard work.