Multiple background colors in event (Scheduler)

You can do this by inserting custom active areas into Scheduler events.

The start and end of an active area can be specified using date/time values instead of pixels. That will let you insert custom time segments.

See also an example in the event phases page of the documentation:

onBeforeEventRender: (args) => {
  const start = new DayPilot.Date(args.data.start);
  const 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"},
  ];
}

You can also combine it with custom resize drag handles to add warm-up and cool-down periods to an event.