Easy Integration of Webix with dhtmlxScheduler

All the working processes are connected with making plans and their fulfilling. To organize events and appointments or to manage and track the ongoing tasks, managers can use an interactive dhtmlxScheduler.

dhtmlxScheduler is a JavaScript multifunctional event calendar that allows adding a Google-like scheduler into your web app. It can create events, show a schedule for a day, week and month, display locations associated with the calendar events, display recurring events.

Nice news! You can easily use Webix with the above useful planning tool. This integration will empower your web apps with the multiple features of Scheduler leaving all great Webix functions.

webix integration with scheduler

Moreover, you don’t need to write tons of code to add Scheduler into a Webix app. You can use Scheduler as any other Webix component.

Beginning of Integration

Firstly get all files from open components repository (a free collection of third party integrations) that will connect your app to this third-party library.

Then you need to include a Scheduler component into your app by using the following code snippet:

<script type="text/javascript" src="components/scheduler/scheduler.js"></script>

After that you can initialize Scheduler using this code:

//path from which extra libraries are autoloaded
webix.codebase = "./";
    date:new Date(2010,0,5),
    init:function(){...}, //scheduler config
        scheduler.parse(" data..")

Scheduler properties

Scheduler inlcudes the following properties:

  • date (function) – defines the start date of the calendar;
  • mode (string) – defines the type of time presentation – day, week or month;
  • init – specifies a function to be performed for component initializing;
  • ready – specifies a function to be executed when the component is fully loaded;
  • parse (string) – XML string with predefined events.

Thereby the result of our work is a nice calendar in the Webix web app.Check its life demo.


As you see, you can add dhtmlxScheduler into Webix apps fast and easily. You just need to take the necessary files, add a few code lines and get a nice planning solution.
Read the dhtmlxScheduler and Webix Documentation to get more details.

Written by
The following two tabs change content below.
Veronika Lindorenko

Veronika Lindorenko

Webix product manager since 2012, interested in SMM and usability. She strives to make the online world better by creating qualitative and catching content.
  • Alex

    Can I use all functionality of dhtmlxScheduler with such kind of integration ?

    • Veronika Lindorenko

      Yes, you can use all the functionliaty of DHTMLX Scheduler in your Webix web apps.

  • Michael Schrading

    In your example I can click on an a date and can direct edit this textfield. I have also done so but when I click on the text field is no reaction. I have to click left beside on the edit menu button and a Text editor window will open. How can I setup so that I can directly edit text fields without opening an editor popup??

All posts: