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).