Timeline view with sections customization

I have a timeline view with 4 Y-axis sections and 30 days long X-scale each block representing one day.
Every day of the X-scale may have 30+ tasks. I want to achieve the following behavior.

  1. Each task must be read-only (no dragging overlay should be displayed on mouse over)
  2. Tasks must be vertically aligned along the X-axis. (Not bellow each other)
  3. If possible I should be able to customize the height of a task based on some logic.

So…is it possible to define the min-width in pixels for the tasks. For example, if I have 30+ tasks and the width of the day cell is 60px depending on the time duration of the tasks they should be displayed accordingly next to each other.

Here is an example with photoshop how it should look. Each color represents a different task type.


Unfortunately, in the current version of Scheduler there is no in-built way to draw tasks vertically in the Timeline view as I see on the screenshot.
We will discuss this idea with dev team. Perhaps it will be implemented in the future, but I think not very soon.

Yes i meant vertically.

Hope you guys implement this functionality in the near future or create an independent timeline based component where users can interact with events at particular moment or ones over period of time.

This feature has low priority at present time, unfortunaltely it will not be implemented in near future.

As for

Please clarify what you mean by that and how this functionality should work in your opinion.

This component should be a mix between dhtmlxGantt and dhtmlxScheduler. The purpose of the timeline is to be able to put events on the timeline that happened or will happen over a period of time (start date and end date).

Unlike dhtmlxGantt and dhtmlxScheduler this component should be able to be zoomed in and out with the mouse scroll button. The user should be able to define max and min zoom level. A horizontal scrollbar should be presented too.

The timeline division should be fully customizable by the user (minutes, hours, days, months and so on)

It would be very helpful to have onZoom event so you can track the zoom level and based on it to modify the appearance of the events.

The user should be able to customize the appearance of the events similar to the image above.


Seems described Zooming can be implemented in dhtmlxGantt, please see the snippet and use there Ctrl + mouse scroll to update settings https://docs.dhtmlx.com/gantt/snippet/11cfad0a