init
Description
Initializes a dhtmlxGantt inside a container
init: (container: string | HTMLElement, from?: Date, to?: Date) => void
Parameters
container- (required) string - | HTMLElement an HTML container (or its id) where a dhtmlxGantt object will be initialized
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 init() is a good way to set the boundary values of the time scale:
gantt.init("gantt_here", new Date(2027, 8, 10), new Date(2027, 8, 20));
Note that the date parameters of init() are shortcuts for the start_date and end_date configs.
The two code snippets below are equivalent to each other:
gantt.init("gantt_here", new Date(2027, 8, 10), new Date(2027, 8, 20));
and
gantt.config.start_date = new Date(2027, 8, 10);
gantt.config.end_date = new Date(2027, 8, 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 init(), as well as the 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 them after calling init() for custom layers to be displayed on a page.