Backbone Integration (legacy)

warning

This article describes a legacy integration. If you're starting fresh, see the framework integrations or vanilla JS setup.

From the version 4.0, the library provides a special extension mvc that allows you to integrate the scheduler with the Backbone library.

If you have a Backbone-based application and want to add the scheduler there (still managing data with Backbone), use the following technique:

1. Include the dhtmlxScheduler files to the app:

<script src="../../codebase/dhtmlxscheduler.js" ></script>
<link rel="stylesheet" href="../../codebase/dhtmlxscheduler.css">

2. Activate the mvc extension on the page:

scheduler.plugins({
    mvc: true
});

3. Initialize and configure the scheduler in a usual way:

scheduler.full_day = true;

scheduler.init("scheduler_here",new Date(2019,0,6),"month");

4. Now you can create a data collection in backbone and link scheduler to it:

//you can use any model here
MyEvent   = Backbone.Model.extend({});
EventList = Backbone.Collection.extend({
    model:MyEvent,
    url:"./data/backbone.json"
});
events = new EventList();
            

scheduler.backbone(events); //link scheduler to collection

After that scheduler will load data from collection and will reflect any updates in it. Also, any changes through scheduler's UI will trigger related events in the backbone's collection.

As you see, it's fairy simple. All you need is to use the backbone method instead of usual load or parse ones.

The backbone method makes the scheduler reflect all data changes in the Backbone model and vice versa. As a parameter, the method takes a Backbone collection.

Backbone integration