Zoom to a specified Range

Gantt React Gantt
#1

I have the project startDate as ‘Feb 17 2017’ and endDate as ‘Apr 27 2017’ .
I have some options where user can select zoom unit, zoom range and zoom anchor.
Ex: zoom unit = ‘week’, zoom range = ‘1’ and zoom anchor = ‘start_date’

So I have to show the user the following output

image
image1215×596 53.9 KB

1 week from startDate is zoomed and shown as above.
This feature should work for different zoom units, zoom ranges and zoom anchors.

Zoom Units options = [‘year’,‘quarter’,‘month’,‘week’,‘day’,‘hour’,‘minute’,‘second’]
Zoom Ranges options = [-2,-1,0,1,2]
Zoom Anchor options = [start_date,end_date,first_visible_date,late_visible_date,today,custom]

Choosing Custom option should allow us to choose a custom date

#2

Hello Ram,
Gantt doesn’t have a built-in config for that, but you can implement it by using the Gantt API and Javascript.

You can use the zoom extension that allows switching to different scales:
https://docs.dhtmlx.com/gantt/desktop__zoom.html

To change the displayed date range, you need to specify both the gantt.config.start_date and gantt.config.end_date parameters:
https://docs.dhtmlx.com/gantt/api__gantt_start_date_config.html

There is an official sample where you can switch to different zoom levels:
https://docs.dhtmlx.com/gantt/samples/?sample='03_scales/05_dynamic_scales.html'&filter=''

Here is another example where you can change the displayed date range:

The following example can help you to start implementing your solution:
https://snippet.dhtmlx.com/czhg7uxr

However, Gantt doesn’t have the “second” scale and unit. You will need to implement it manually.

The following article explains how to create a custom time unit:
https://docs.dhtmlx.com/gantt/desktop__configuring_time_scale.html#customtimeunits

Also, after you drag a task, Gantt will round the date to the nearest scale cell. And if you disable that, Gantt will round it to the nearest hour. So, you will need to revert the changes. You can do that by saving the dates in the onTaskDrag event handler and restoring them in the onAfterTaskDrag event handler:
https://docs.dhtmlx.com/gantt/api__gantt_ontaskdrag_event.html
https://docs.dhtmlx.com/gantt/api__gantt_onaftertaskdrag_event.html

Here is an example of how it can be implemented:
https://snippet.dhtmlx.com/y9x52cki

Also, we have a lower priority for the questions on the forum and below the documentation articles. If you want to get the answer earlier, you can submit a support request via email. Usually, we answer the questions in the support requests winthin 24 hours on business days.