Event Phases

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

JavaScript

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

• JavaScript Scheduler: Warm-Up and Cool-Down Time

Angular

• Angular Scheduler Event Phases (Tutorial)