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-06-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: DayPilot.Util.escapeHtml(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

API: onBeforeEventRender.

The framework examples draw two colored strips along the bottom of a single project event. Each active area uses start and end dates to position its phase on the timeline.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Project", resource: "A", start: "2026-11-03", end: "2026-11-10"}],
    onBeforeEventRender: args => { args.data.areas = [{start: "2026-11-03", end: "2026-11-06", bottom: 0, height: 6, backColor: "#2563eb"}, {start: "2026-11-06", end: "2026-11-10", bottom: 0, height: 6, backColor: "#16a34a"}]; }
  };

}

• Angular Scheduler Event Phases (Tutorial)

React

import React from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Project", resource: "A", start: "2026-11-03", end: "2026-11-10"}]}
      onBeforeEventRender={args => { args.data.areas = [{start: "2026-11-03", end: "2026-11-06", bottom: 0, height: 6, backColor: "#2563eb"}, {start: "2026-11-06", end: "2026-11-10", bottom: 0, height: 6, backColor: "#16a34a"}]; }}
    />
  </div>;
}

Vue

<script setup>
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Project", resource: "A", start: "2026-11-03", end: "2026-11-10"}];
const onBeforeEventRender = args => { args.data.areas = [{start: "2026-11-03", end: "2026-11-06", bottom: 0, height: 6, backColor: "#2563eb"}, {start: "2026-11-06", end: "2026-11-10", bottom: 0, height: 6, backColor: "#16a34a"}]; };

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :onBeforeEventRender="onBeforeEventRender"
    />
  </div>
</template>