Extract visual timeline min and max dates to pass to api

Gantt
#1

I am looking to pass a min and max date that represents what visually being shown to the user. So visually if the first date appearing on the timeline is aug 1st 2023 and I am viewing from a month interval the last visual date in the timeline is aug 31st 2023.

I will also need to know an event that is triggered when the timeline max and min date change. For example if the user switches the interval or scrolls I want to pass the new min and max date to the api.

From the back end I’ll use the min and max date to only query tasks that fall in between those dates.

I am aware you can set a start and end date when initiating the gantt chart. As well you can access the gantt state and retrieve the max and min date of the tasks being passed in. So I could by default set the min date, max date and interval to a month. However not sure where to go from there or if that is how to approach the problem.

Any help would be greatly appreciated.

#2

Hello Lucas,
By default, when the displayed date range is not set, Gantt adds 1 cell to the most left and right dates of the task dataset.

The displayed date range can be set with the gantt.config.start_date and gantt.config.end_date parameters. And if you change them, you need to call the render method to repaint the changes.
Here is an example:

You can get the minimal and maximal dates of the loaded dataset with the getSubtaskDates method:
https://docs.dhtmlx.com/gantt/api__gantt_getsubtaskdates.html

To get the minimal and maximal dates for the displayed date range, you can use the getState method:
https://docs.dhtmlx.com/gantt/api__gantt_getstate.html

With that method, it doesn’t matter if you manually set the displayed date range or Gantt calculated it dynamically from the task dates.

Gantt doesn’t have a public event that fires when the displayed date range is changed (dynamically or manually). But you can check the dates in the onDataRender event handler:
https://docs.dhtmlx.com/gantt/api__gantt_ondatarender_event.html

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

Also, the displayed date range is not the same as viewport dates. The latter is used by Gantt for the smart rendering feature to not render HTML elements outside the viewport dates (visible area in the browser). There is no public method to get the viewport dates, but you can use the Gantt API to get them.

You can get the left viewport position from the scroll position of the timeline. For that, you need to use the getScrollState method:
https://docs.dhtmlx.com/gantt/api__gantt_getscrollstate.html

To get the right viewport position, you need to add the width of the timeline container to the scroll position.

After that, you need to use the dateFromPos method to convert the position in the timeline to the date:
https://docs.dhtmlx.com/gantt/api__gantt_datefrompos.html

You can see how it is used in the following snippet where the data is exported only within the viewport dates:

However, if you want to load tasks between the specified dates, it may not be the best way to do that. A child task will not be displayed if its parent task is not loaded. So, if you load only child tasks without parent tasks, you will see an empty chart.
Instead of that, you can load the whole dataset and filter tasks with the onBeforeTaskDisplay event handler:
https://docs.dhtmlx.com/gantt/desktop__filtering.html
https://docs.dhtmlx.com/gantt/api__gantt_onbeforetaskdisplay_event.html

But if your use case is not related to Gantt, it may not be relevant.