During one event, I have three areas with four dates in total. Is there a way to move each date to resize the event independently?

Hi everyone,

There are three areas in my event. A single event has 4 dates. The starting date, hla_start, hla_end, and end date are all included.

I can change the start or end date of the event. It is not possible for me to resize the event inside for hla_start and hla_end by dragging the cursor. It's impossible for me to trigger the cursor to resize the action.

Can you provide me with direction in this situation?

This his my code

1 - on before render :

onBeforeEventRender: function(args) {
    var html = args.data.html;
    args.data.html = "";
    args.data.barHidden = true;
    args.data.resizeDisabled = false;

    var hlaStart = new DayPilot.Date(args.data.hla_start);
    var hlaEnd = new DayPilot.Date(args.data.hla_end);

    // Use the loading color, or a default color if not set
    var loadingColor = args.data.backColor || "#a61c00"; 
    args.data.backColor = "transparent";
    args.data.borderColor = "transparent";

    // Set the action property in data
    args.data.action = "ResizeStart"; 

    args.data.areas = [
        {
            start: args.data.start,
            end: hlaStart, // Changed from args.data.start
            top: 15,
            bottom: 15,
            backColor: "black", // Black line design
            html: "<div style='height: 2px; background-color: black; width: 100%;'></div>",
            action: "ResizeStart", // Set the action to "ResizeStart"
        },
        {
            start: hlaEnd,
            end: args.data.end,
            top: 15,
            bottom: 15,
            backColor: "black", // Black line design
            html: "<div style='height: 2px; background-color: black; width: 100%;'></div>",
            action: "ResizeEnd",
        },
        {
            start: hlaStart,
            end: hlaEnd,
            top: 0,
            bottom: 0,
            backColor: loadingColor,
            style: "color: black; display: flex; justify-content: center; align-items: center;",
            html: html || args.data.text,
        },
        {
            start: hlaStart,
            width: 10,
            top: 0,
            bottom: 0,
            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",
            className: "hla-start-marker-area", // Add a class for identification
        },
        {
            end: hlaEnd,
            width: 10,
            top: 0,
            bottom: 0,
            html: "<div class='hla-start-marker'>|||</div>",
            style: "color: #000; display: flex; justify-content: center; align-items: center; padding-right: 12px; transition: color 0.3s;",
            action: "ResizeHlaStart",
            className: "hla-start-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;
},

2 - on Event Resize

// resize the time on the event
onEventResize: function(args) {
    console.log('Resize Args:', args);
    const resizedEvent = args.e;

    // Check if new start and end are defined
    if (args.newStart === undefined || args.newEnd === undefined) {
        console.warn('Resize action is undefined');
        return;
    }

    // Check if hla_start is smaller than start
    if (args.action === 'ResizeHlaStart' && args.newStart < resizedEvent.start()) {
        console.warn('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
        console.warn('Unknown resize action');
    }
    //
},