search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Cell duration when using manual time line

Asked by Patrik Bohman
4 months ago.

Hi,

How do you control the cell duration (minutes) when setting scale to manual.

I have the following setup

scale: "manual"

timeline: [
{ start: "2019-11-15T06:00:00", end: "2019-11-16T00:00:00",width : 750 },
{ start: "2019-11-16T00:00:00", end: "2019-11-17T00:00:00", width: 750 }]

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

using this I dont get any grouping of minutes at all ( see manual_timeline.png).

Setting scale to "CellDuration", and CellDuration to "10", I end up with each hour split into 6 10 min cells (cellduration.png). So how can I achieve the same look using manual timeline ?

We are using version 2019.4.4089 of Daypilot (Javascript)

Answer posted by Dan Letecky [DayPilot]
4 months ago.

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

Comment posted by Dan Letecky [DayPilot]
4 months ago.

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

Comment posted by Patrik Bohman
4 months ago.

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" ?

Comment posted by Dan Letecky [DayPilot]
4 months ago.

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.

Comment posted by Patrik Bohman
4 months ago.

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.

Comment posted by Dan Letecky [DayPilot]
3 months ago.

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.

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.