You can display custom segments inside an event using event active areas.

JavaScript

html5-scheduler-event-phases-segments.png

This example displays three active areas inside an event:

  • Preparation phase (1 days)
  • Main event (total duration minus 2 days)
  • Cleanup phase (1 day)

Example:

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

<script type="text/javascript">

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

    dp.startDate = "2016-01-01";
    dp.days = 366;
    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: "2016-01-05", end: "2016-01-12", 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(1), top: 0, bottom: 0, backColor: "#6AA84F", html: "Preparation", style: "padding: 5px; color: white"},
            {start: start.addDays(1), end: end.addDays(-1), top: 0, bottom: 0, backColor: "#38761D", html: args.data.text, style: "padding: 5px; color: white"},
            {start: end.addDays(-1), end: end, top: 0, bottom: 0, backColor: "#274E13", html: "Cleanup", style: "padding: 5px; color: 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).

Angular 2