Is it possible to use events with different phases to make it shape like this?

You can customize the Scheduler event appearance using the onBeforeEventRender event handler.

It lets you apply custom CSS class to the event, and specify event phases using active areas.

See also the JavaScript Scheduler: Warm-Up and Cool-Down Time tutorial for detailed explanation and a sample project.

I adhere to the example you were discussing. I'm nearly done with getting what I want, but I'm having trouble with the first and third parts of the event. My objective is to arrange them into a line. In the initial phase, how do I get rid of the background event bar that's behind my line?

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

    var hlaStart = new DayPilot.Date(args.data.hla_start);
    var hlaEnd = new DayPilot.Date(args.data.hla_end);
    var loadingColor = args.data.backColor || "#a61c00"; // Use the loading color, or a default color if not set

    args.data.areas = [
        {
            start: args.data.start,
            end: hlaStart,
            top: 15,
            bottom: 15,
            backColor: "#dd7e6b", // Color before hla_start
        },
        {
            start: hlaStart,
            end: hlaEnd,
            top: 0,
            bottom: 0,
            backColor: loadingColor, // Color between hla_start and hla_end
            style: "color: #000; display: flex; justify-content: center; align-items: center;",
            html: html || args.data.text,
            action: "ResizeStart",
            action: "ResizeEnd",
        },
        {
            start: hlaEnd,
            end: args.data.end,
            top: 0,
            bottom: 0,
            backColor: "#dd7e6b", // Color after hla_end
        },
    ];
},

Sorry for the delay!

You probably mean the event border - you can hide it like this:

args.data.borderColor = "transparent";

You can also make the event background transparent:

args.data.backColor = "transparent";

hi Dan ,

Very nice of you. I will try and let you know about. Thanks for your time. I know it’s very busy job here.

My best

Regards

Aurelien Peuportier

Super it’s work well.

I finally get what i was expected for:

i will share the code for the community

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

    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";

    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>`,
        },
        {
            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>`,
        },
        {
            start: hlaStart,
            end: hlaEnd,
            top: 0,
            bottom: 0,
            action: "Move",
            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: "|",
            style: "color: #fff; display: flex; justify-content: center; align-items: center;",
            action: "ResizeStart",
        },
        {
            end: hlaEnd,
            width: 10,
            top: 0,
            bottom: 0,
            html: "|",
            style: "color: #fff; display: flex; justify-content: center; align-items: center;",
            action: "ResizeEnd",
        },
    ];

    // Store original start and end for comparison in onEventResized
    args.data.originalStart = args.data.start;
    args.data.originalEnd = args.data.end;
    args.data.originalhla_start = hlaStart;
    args.data.originalhla_end = hlaEnd;
},

Good day and again thanks to Daypilot team’s

see attach picture for the result