The JavaScript Scheduler component can display custom segments inside an event using event active areas.

JavaScript

javascript html5 scheduler event phases segments

This example displays three active areas inside an event:

  • Preparation phase (3 days)
  • Main event (total duration minus 6 days)
  • Cleanup phase (3 days)

Example:

<div id="dp"></div>

<script type="text/javascript">

    var dp = new DayPilot.Scheduler("dp");

    dp.startDate = "2023-01-01";
    dp.days = 365;
    dp.scale = "Day";
    dp.timeHeaders = [
        { groupBy: "Month", format: "MMM yyyy" },
        { groupBy: "Cell", format: "ddd d" }
    ];

    dp.cellWidth = 80;
    dp.eventHeight = 50;

    dp.events.list = [
        { id: 1, text: "Event 1", start: "2023-06-03", end: "2023-03-15", resource: "A"}
    ];

    dp.onBeforeEventRender = function(args) {
        var start = new DayPilot.Date(args.data.start);
        var end = new DayPilot.Date(args.data.end);
        args.data.areas = [
            {start: start, end: start.addDays(3), top: 0, bottom: 0, backColor: "#6AA84F", html: "Preparation", fontColor: "white"},
            {start: start.addDays(3), end: end.addDays(-3), top: 0, bottom: 0, backColor: "#38761D", html: args.data.text, fontColor: "white"},
            {start: end.addDays(-3), end: end, top: 0, bottom: 0, backColor: "#274E13", html: "Cleanup", fontColor: "white"},
        ];
    };

    dp.treeEnabled = true;
    dp.resources = [
        { name: "Locations", id: "G1", expanded: true, children:[
            { name : "Room 1", id : "A" },
            { name : "Room 2", id : "B" },
            { name : "Room 3", id : "C" },
            { name : "Room 4", id : "D" }
        ]
        },
        { name: "People", id: "G2", expanded: true, children:[
            { name : "Person 1", id : "E" },
            { name : "Person 2", id : "F" },
            { name : "Person 3", id : "G" },
            { name : "Person 4", id : "H" }
        ]
        },
        { name: "Tools", id: "G3", expanded: false, children:[
            { name : "Tool 1", id : "I" },
            { name : "Tool 2", id : "J" },
            { name : "Tool 3", id : "K" },
            { name : "Tool 4", id : "L" }
        ]
        },

    ];

    // ...
    dp.init();

</script>

In this example the active areas are added using onBeforeEventRender but you can also add them directly to the data source (using "areas" property).

See Also

Angular