Cell duration when using manual time line

Unfortunately it's not possible to use custom grouping of the time headers. Only the predefined values are available (see https://doc.daypilot.org/scheduler/time-header-groups/).

If you want to show 10-minute groups you will have to use 10-minute cells in the grid (and use groupBy: "Cell").

There is one more option, after all. Please see the time header customization tutorial:
https://code.daypilot.org/96228/tutorial-javascript-scheduler-time-header-customization

Hi Dan, thanks for the reply.

I'm a bit confused, are you saying its possible to use groupByCell and a custom time line ?, if so
how do I achieve 10 minute cells when using custom timeline ? , I already use groupBy: "Cell" but the CellDuration property seems to be ignored when setting scale to "manual" ?

Hi Patrik,

The tutorial uses a different approach - it uses groupBy: "None" to create one big cell in the time header and onBeforeTimeHeaderRender to insert custom elements (cell separators and names) at specified times using active areas.

That would allow drawing time header cells wherever you need.

> I already use groupBy: "Cell" but the CellDuration property seems to be ignored when setting scale to "manual" ?

The groupBy:"Cell" option forces the time header cells to match the grid cells. The grid cells are defined by the custom time line. In this case, the value of cellDuration is not used at all and both the grid cells and time headers use the segments defined using "timeline" array.

Dan , could you point me to an example using group by "none" and onBeforeTimeHeaderRender ? , i cant find it in the link you provided.

As far as I can see OnBeforeTimeHeaderRender and active areas only affects the visual appearance , I cant see how to override the cell duration.

Patrik,

If you use the following time header:

timeHeaders: [
{ groupBy: "Day", format: "dddd, d MMMM yyyy" },
{ groupBy: "Hour" },
{ groupBy: "None" }
]

the Scheduler will create a single cell in the third time header row. Then you can use onBeforeTimeHeaderRender to insert 1px-wide active areas at the specified times to serve as marks:

onBeforeTimeHeaderRender: function(args) {
  if (args.header.level === 2) {
    args.header.areas = [];
    for (var i = 0; i < ...; i++) {
      args.header.areas.push({ start: args.header.start.addMinutes(i*10), width: 1, top: 0, bottom: 0, backColor: "black" });
      // ...
     } 
  }
}

The same approach can be used to insert the minute numbers.