Gantt or scheduler

Gantt
#1

Hi,
I need to understand if I can achieve creating this component in my project using gantt or scheduler features

image
image900×573 43 KB

Key features:

  • Zoom in/out showing 2 or 5-6 days
  • Data is shown hour by hour
  • The bars are editable, we can resize/select/drag
  • Rows are expendables showing more data
  • Different views like edit/view modes
  • We have a vertical line selector over the table that will interact with cells/bars
  • Scroll

Thanks

#2

Hello Doru,

Zoom in/out showing 2 or 5-6 days
Data is shown hour by hour

You can change the scale settings and use the zoom extension:
https://docs.dhtmlx.com/gantt/desktop__configuring_time_scale.html
https://docs.dhtmlx.com/gantt/desktop__zoom.html
Here are examples of how it works:
https://docs.dhtmlx.com/gantt/samples/03_scales/05_dynamic_scales.html
https://docs.dhtmlx.com/gantt/samples/03_scales/14_scale_zoom_by_wheelmouse.html

The bars are editable, we can resize/select/drag

That feature works out of the box:
https://docs.dhtmlx.com/gantt/samples/01_initialization/01_basic_init.html

Rows are expendables showing more data

In the current version, there is no way to set individual height for rows, you can only change it for all rows. But in the 7.1 version, the dev team will add that feature.

Different views like edit/view modes

You can toggle the readonly property to allow/block modifying the data:
https://docs.dhtmlx.com/gantt/api__gantt_readonly_config.html
Here is an example:
https://snippet.dhtmlx.com/5/b790fd737

We have a vertical line selector over the table that will interact with cells/bars

You can use the marker extension to add vertical lines:
https://docs.dhtmlx.com/gantt/desktop__markers.html
Here is an example:
https://docs.dhtmlx.com/gantt/samples/02_extensions/05_today_line.html

Scroll

Scrolling the chart works out of the box:
https://docs.dhtmlx.com/gantt/samples/01_initialization/02_load_json.html
If you want to scroll the timeline via the mouse, you need to use the drag_timeline extension:
https://docs.dhtmlx.com/gantt/api__gantt_drag_timeline_config.html
Here is an example of how it works:
https://docs.dhtmlx.com/gantt/samples/02_extensions/27_drag_timeline.html

However, I see that there are rows without tasks. In Gantt, there is no built-in way to do that. You need to implement a custom solution by using Gantt API and Javascript:
For example, you can create unscheduled tasks and apply custom styling. I have the following examples that can help you to start:
http://snippet.dhtmlx.com/5/270ee35e8
https://snippet.dhtmlx.com/5/c3a20006e