init

initializes a dhtmlxGantt inside a container

void init(string | HTMLElement container, [Date from,Date to] );
containerstring | HTMLElementan HTML container (or its id) where a dhtmlxGantt object will be initialized
fromDatethe start value of the time scale (X–Axis)
toDatethe end value of the time scale (X–Axis)

Example

gantt.config.scale_unit = "month";
gantt.config.date_scale = "%F, %Y";
 
gantt.init("gantt_here");
gantt.load("tasks.json");

Details

Using the 2nd and 3rd parameters of the method is a good way to set the boundary values of the time scale:

gantt.init("gantt_here", new Date(2023, 08, 10), new Date(2023, 08, 20));

Note, that date paremeters of the gantt.init method are shortcuts for start_date and end_date configs. The two code snippets below are equivalent to each other:

gantt.init("gantt_here", new Date(2023, 08, 10), new Date(2023, 08, 20));

and

gantt.config.start_date = new Date(2023, 08, 10);
gantt.config.end_date = new Date(2023, 08, 20);
gantt.init("gantt_here");

What these configs do is define and limit the displayed date range. Tasks that fall outside that specified range won't be displayed.

Using the date parameters of the gantt.init method, as well as start_date and end_date configs will cancel the fit_tasks setting.

If you want the time scale to be dynamically adjusted according to the date range, you can either skip these parameters or manage the time range dynamically.

This method resets custom layers added to the timeline area via the addTaskLayer and addLinkLayer methods. Therefore, you need to redefine these ones after calling the gantt.init method in order for custom layers to be displayed on a page.

See also
Back to top