dhtmlxScheduler 4.0: Integration with jQuery, Backbone.js, and More

| Comments (15)

We are proudly announce the release of dhtmlxScheduler 4.0, our embeddable JavaScript calendar that provides an advanced solution for displaying and managing events and appointments. Version 4.0 adds integration with jQuery and Backbone.js and introduces a number of new features. It comes with the new and improved documentation which helps developers understand and use the powerful features of dhtmlxScheduler with ease.

download scheduler

Customizable Time Scale

dhtmlxScheduler 4.0 allows you to customize the horizontal time scale. You can remove or add days and hours and easily adjust the time scale to your needs. For example, you can now choose to display a 7-day week or 5-day week, or even show working days of two weeks (see the screenshot below). You can also use this feature to display only working hours, removing the weekend and lunch hours.

dhtmlxScheduler 4.0 - Custom Horizontal Time Scale

UI Enhancements for Month View

The new version comes with the ability to control the number of events displayed in a cell in the Month View. You can define the maximum number of events in a cell and put ‘View more events’ links to show the rest of the events that occur this day. This helps to clean up the Month View if you have lots of events in the same day.

dhtmlxScheduler 4.0 - Month View

jQuery Integration

In this release we have added the ability to initialize the scheduler with the standard jQuery syntax. It allows you to add dhtmlxScheduler on a page as a jQuery plugin and be sure that it won’t conflict with the jQuery framework.

Backbone.js Integration

There is now an easy way to use dhtmlxScheduler in a Backbone-based app. A special extension added in version 4.0 allows you to integrate the scheduler with the Backbone.js and use the advantages of this MVC framework.

Improved Logic for Recurring Events

We have improved the logic of creation of the recurring events that are repeated weekly. In the previous version, the scheduler added the recurring events starting from the week when the event was added. Now the recurring events are added starting from the first day of actual occurrence. For example, if on Wednesday you create a set of events repeated each Monday, the first event will be added to the next Monday (not this Monday). If needed, you can still use the old way of adding the events.

Updated Documentation and Online Demos

This release introduces the new and improved documentation. The documentation now has a clean interface and intuitive navigation. We have added some new guides and tutorials that help you get started and learn how to use the scheduler’s API to build rich calendar UIs more quickly. You can also see all dhtmlxScheduler demos online.

Other Improvements

This release includes more than 30 minor fixes in already existing functionality as well as support for the latest mobile Chrome. We have also made multi-day events to be visible by default and added the ability to retrieve JSON data from ASP.NET web service. Starting from version 4.0, dhtmlxScheduler uses ‘terrace’ as a default skin.

Download dhtmlxScheduler Standard 4.0

The PRO Edition will be sent to the users with Enterprise License and active support subscription by email. If you have any comments or suggestions, feel free to leave them in comments.


  1. Oval July 2, 2013 at 8:43 pm

    awesome stuff, the scheduler just keeps getting better and better!

    one q re: recurring events:
    If i set a recurring event, and want to alter the event after a few iterations, how can i just alter all the occurrences starting from a certain date
    For example, I have an event starting on July 1st, each Monday, byt starting from December 1st, I want the event to move to Tuesday. (just the dates between Aug 1 – Dec 1st should change)

    Anyway, thanks for the awesome work, dhtmlx Scheduler rules!

    • Stanislav July 4, 2013 at 1:17 pm

      While this feature is not a part of version 4.0, it is in our TODO list and will be added in one of next versions.

  2. Oval July 4, 2013 at 3:02 pm

    Awesome, looking forward to it!

  3. goodlooks July 24, 2013 at 4:46 am

    In backbone implementation, when there are switching between 2 views, then how do you manage the events. Do I have to recreate all events or re-initialize the scheduler? Because the mousedown and mouseup events are managed by your scheduler and backbone wil re-render the html.

  4. Javier July 27, 2013 at 7:40 pm

    Is it work with Liferay 6 portlet? What are the steps for get that?

    • Ivan July 29, 2013 at 7:14 pm

      Javier, we haven’t try to use dhtmlxScheduler with Liferay 6 portlet so unfortunately we can’t say whether the Scheduler will work with it.

  5. Devastotra August 15, 2013 at 2:16 am

    Hi ,
    I have a question on the scheduler, Considering two different people want to send a meeting request to each other, and they are on a different time zone, say USA and NZ, does this automatically will show them the relevant time in that zone. Or is it possible that I can possibly be tweaked into your present application

  6. ruwan August 26, 2013 at 2:40 pm

    how to remove weekend from scheduler please any one can help me…………………

    • Ivan August 26, 2013 at 3:58 pm

      Please post your question to the forum. It’s the best place for your technical questions.

  7. Mohit Kumar Gupta October 24, 2013 at 10:20 am


    how to add multiple task or multiple project in same line of gantt chart
    please explain me. urgent requirement


  8. jannine January 10, 2014 at 11:00 am


    how to Loading from csv in dhtmlxScheduler 4.0 ?

    • Ivan January 10, 2014 at 5:35 pm

      You can implement parser for your CSV data and add it to the scheduler. After that, the scheduler will be able to work with CSV. To do it, you need to define method that creates array of events from CSV string. Here is schematic (not a ready code) implementation:

      scheduler.csv = {};
      scheduler.csv.parse = function(data){
       // data - your comma separated values
       // in this method you need to parse them and create array of calendar events as described here  
      // http://docs.dhtmlx.com/scheduler/loading_data.html#dataproperties

       var events = [];

       //popuplate array from data string somehow

       return events;

      After that, the scheduler will be able to load CSV values from inline source:

      scheduler.parse(data, 'csv');

      or load them via ajax:

      scheduler.load('url', 'csv');
  9. Ajay June 15, 2014 at 1:06 pm

    How can we customize this to display Team Schedule (i.e. Timeline view), daily, weekly & monthly. Y Axis will always display Team Members, X will display TODAY by default, and buttons to display Week & Month as well. Only view is needed. Data is coming from our database. I did that already.

    • Ivan (DHTMLX team) June 17, 2014 at 4:30 pm

      Usually it’s done by creating a several Timelines which have different scale configurations, and all other settings the same.

      So when you need to switch timeline to ‘weekly’ display, you simply activate the timeline which scale is configured to display weeks- scheduler.setCurrentView(null, ‘weekly-timeline’). Since all timelines will have the same settings (including Y-axis), for user it will look like the same timeline with changed x-scale.

      Btw, for such questions it’s better to use our forum (registration is free).

Leave a Reply