Easy Integration of Webix with dhtmlxScheduler

Please note that the article is outdated. There is a new article on the 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.

Update of October 8, 2020

With the release of Webix 8.0 the original JavaScript Scheduler component has become available. Now Webix users can enjoy the native Webix Scheduler. This component is created according to the canons of the Webix framework and it is intended for the integration into any business applications regardless of their architecture and system platform. 

You can download the free version of Scheduler by following this link. You can find more detailed information on the Scheduler home page, on the JS Scheduler documentation page or in the Scheduler source code sample catalog. 

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 = "./";
 
webix.ui({
    view:"dhx-scheduler",
    date:new Date(2010,0,5),
    mode:"week",
    init:function(){...}, //scheduler config
    ready:function(){
        scheduler.parse("..events 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.

Conclusion

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.