Both Scheduler and Gantt are nice planning tools from DHTMLX JS library. While Scheduler is an event calendar, the Gantt is a chart to display a long-term project schedule.
JS files for these components aren't included in the lib package and should be taken:
<script src="https://cdn.webix.com/components/edge/ckeditor/ckeditor.js"></script>
You can set path to sources of the necessary DHTMLX component on CDN. Actually, there are three ways to do that:
Scheduler is JavaScript feature-rich event calendar that can create and display events as well as show a schedule for a day, week and month. Full info about it can be found in the dedicated section of DHTMLX site.
To include Scheduler into your app, you need to add a link to a dedicated library file into your document head section. Note that in a documentation sample this file is included in another way, but in your real app you should the pattern below:
<script type="text/javascript" src="./scheduler.js"></script>
And then init the view:
webix.ui({
view:"dhx-scheduler",
date:new Date(2010,0,5),
mode:"week",
init:function(){...}, //scheduler config
ready:function(){
scheduler.parse("..events data..")
}
});
Check Scheduler Documentation for more details.
To use the DHTMLX Scheduler properties, you need to get to the Scheduler component with the help of the getScheduler() method:
var scheduler = $$("scheduler").getScheduler();
The method has one optional parameter - waitScheduler. If it is true, the method returns a promise that resolves when the Scheduler object is ready:
$$("scheduler").getScheduler().then(function(scheduler){
// scheduler is the Scheduler object
});
Read more about date formatting methods in the corresponding chapter of the manual.
DHTMLX Gantt is a chart for visualizing project schedule that allows for easy setting and showing dependencies between tasks. It's highly customizable and features flexible API.
Full into about it can be found in the dedicated section of DHTMLX site.
To include Gantt into your app, you need to add a link to a dedicated library file into your document head section.
<script type="text/javascript" src="./gantt.js"></script>
And then init the view:
webix.ui({
view:"dhx-gantt",
init:function(){...},
ready:function(){
gantt.parse(tasks); //adding tasks
}
});
To use the DHTMLX Gantt API, you need to get to the Gantt component with the help of the getGantt() method:
var gantt = $$("gantt").getGantt();
The method has one optional parameter - waitGantt. If it is true, the method returns a promise that resolves when the Gantt object is ready:
$$("gantt").getGantt().then(function(gantt){
// gantt is the Gantt object
});