init

initializes a dhtmlxGantt inside a container

void init(string|HTMLElement container, [Date from,Date to] );

Parameters

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(2019, 08, 10), new Date(2019, 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(2019, 08, 10), new Date(2019, 08, 20));

and

gantt.config.start_date = new Date(2019, 08, 10);
gantt.config.end_date = new Date(2019, 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.

See also
Back to top