Maximize height of events in timeline view

Scheduler Javascript
#1

In the timeline view the events are being shown as small bars. I would like to maximize the height of the event bar to the height of the resource bar. See the attached screenshot for example (I marked the height as I would like it to be).

I would like to maximize this height so that it is clear for the user that the resource is occupied and cannot be reserved anymore. In the current situation the user might think that the resource can be double booked, since there is a white space underneath the bar. This is not the case.

An alternative might be to decrease the height of the resource so that it is the same as the height of the event.

Screenshot2.png851×388 64.2 KB

#2

You may consider usage of “cell” mode, where whole cell is filled with event.
samples\06_timeline\01_slots.html

#3

The cell mode is not what I’m looking for. The timeline view is better since it is more precise in showing the occupation.

So, is there a way to change the height of the events? Or change the height of the resources?

Thanks.

#4

Hello,

Currently it’s impossible to edit height of the events in the timeline view. Though you can edit in the source code to match the height of the section new but new problem will appear - second event in the same time frame wouldn’t be seen.

It’s possible to control height of the resources. Add dy property to the initialization object.

For more information check out Timeline view documentation.

Best regards,
Ilya

#5

Thanks! The second solution (to set dy) is exactly what I need!

#6

I know it has been 10 years since the last post, but just wanted to look if there is any progress regarding the events height, however in my case to force the height size “dy:32” even when there is a double event on the same time slot.
Right now the events change their height to 20px once I have them double, triple, etc.
Is there any workaround?

Thanks in advance

#7

Hello @Contente ,

Yes, currectly you can fix the event height with the event_dy property, and forbid scheduler to decrease it(on adding more events) by setting the resize_events to false.

Example of config:

scheduler.createTimelineView({
  name:	"timeline",
  x_unit:	"day",
  x_date:	"%H:%i",
  x_step:	1,
  x_size: 7,
  x_start: 0,
  x_length: 7,
  y_unit:	sections,
  y_property:	"section_id",
  render:"bar",
  event_dy: 50,
  resize_events: false,
  second_scale:{
    x_unit: "day", 
    x_date: "%F %d" 
  }
});

Here is a demo:
http://snippet.dhtmlx.com/5/61176d829

Full list of the createTimelineView parameters:
https://docs.dhtmlx.com/scheduler/api__scheduler_createtimelineview.html

1 Like
#8

It couldn’t be any better!! :slight_smile: