Intermediate

Scheduler and Gantt Integration

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.

How to Include

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>

Setting Path to the Component

You can set path to sources of the necessary DHTMLX component on CDN. Actually, there are three ways to do that:

  • via the cdn property in the view configuration. This way allows setting path to the particular version of the necessary library or to the local CDN;
  • not setting any paths at all. In this case either the official CDN of the component or the global cdnjs (if the source of the component is available there) will be used;
  • by directly including all the source files of the component on a page. In this case you should set the cdn property to false to avoid possible collisions with the component version included by default.

DHTMLX Scheduler

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.

Scheduler Initialization

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..")
    }
});

Related sample:  Scheduler

Scheduler properties

  • date (function) - defines the start date of the scheduler. In the sample above, it is the 5th of January, 2010; If you pass no parameters into the new Date() constructor, the component will show current date;
  • mode (string) - defines the type of presentation - day, week or month;
  • init - specifies a function to be executed on component initializing. The property may include:
    • scheduler.config.xml_date - defines data format, e.g. "%Y-%m-%d %H:%i";
    • scheduler.config.first_hour (integer) - specifies an hour to start the day;
    • scheduler.config.multi_day (boolean) - allows/forbids creating events that last several days.
  • ready - specifies a function to be executed when the component is fully loaded;
  • parse (string) - XML string with predefined events.

Check Scheduler Documentation for more details.

Read more about date formatting methods in the corresponding chapter of the manual.

DHTMLX Gantt Chart

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.

Gantt Initialization

To include Scheduler 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
    }
});

Related sample:  Gantt Chart

Gantt Properties

  • init - functions to execute on initialization;
  • ready - specifies a function to be executed when the component is fully loaded.

Related Articles

Back to top
If you have not checked yet, be sure to visit site of our main product Webix html5 framework and page of javascript event scheduler product.