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 = "./";
 
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.