Utilize full cell when max hours = 9 hours

If you use the default .useEventBoxes value the events will be aligned with the grid cells:

dp.useEventBoxes = "Always";

See also:
https://doc.daypilot.org/scheduler/exact-event-duration/

I am required to use dp.useEventBoxes = "Never" as I have one or more events occuring within the same day and require them to appear in one cell in one line. Please see and example attached herewith,

http://imgur.com/a/ke1y1

I have managed to however achive the same using eh following config. However this seems to be very slow in rendering. Any ideas how I could achive the same with more efficiency?

this.config = {

// Timespan settings.
startDate: "2016-05-01", //this.displayDate,
days: 366,

// Viewport settings.
timeHeaders: [
{ groupBy: "Year" },
{ groupBy: "Quarter" },
{ groupBy: "Month" },
{ groupBy: "Week" },
{ groupBy: "Day", format: "d" }
],
scale: "Day", // <- Using day-wise scale
cellGroupBy: "Day", <-- Using day-wise grouping
useEventBoxes: "Never",

// Event settings.
durationBarMode: "PercentComplete",
onEventClicked: args => this.onEventSelected(args),
onIncludeTimeCell: args => this.onIncludeTimeCell(args)
};

onIncludeTimeCell(args) {

// Hiding cells which have a start hour greater than or equal to nine.
if (args.cell.start.getHours() >= 9) {
args.cell.visible = false;
}
}

You can also create a custom timeline and manually create days with start at 00:00 and end at 09:00:

https://doc.daypilot.org/scheduler/timeline/