All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Array Only

To bind the Scheduler to an array, pass this array to the dataSource option.

jQuery
JavaScript
var appointments = [{ 
    text: 'Meet with a customer', 
    startDate: new Date(2016, 4, 25, 1, 30),
    endDate: new Date(2016, 4, 25, 3, 30)
}, { 
    text: 'Discuss results', 
    startDate: new Date(2016, 4, 25, 9, 0),
    endDate: new Date(2016, 4, 25, 10, 0)
}, // ...
];

$(function(){
    $("#schedulerContainer").dxScheduler({
        dataSource: appointments
    });
});
Angular
TypeScript
HTML
import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent  {
    appointments = [{
        text: "Meet with a customer",
        startDate: new Date(2016, 4, 25, 1, 30),
        endDate: new Date(2016, 4, 25, 3, 30)
    }, {
        text: "Discuss results",
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 10, 0)
    }];
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
<dx-scheduler
    [dataSource]="appointments">
</dx-scheduler>

View Demo

If objects in the array need to be processed (for example, filtered), you can create a Query. In the following code, a Query selects objects with text containing 'meet'.

jQuery
JavaScript
var appointments = [{ 
    text: 'Meet with a customer', 
    startDate: new Date(2016, 4, 10, 11, 0), 
    endDate: new Date(2016, 4, 10, 13, 0) 
}, 
// ...
];

$(function(){
    $("#schedulerContainer").dxScheduler({
        dataSource: DevExpress.data.query(appointments)
                        .filter("text", "contains", "meet")
                        .toArray()
    });
});
Angular
TypeScript
HTML
import { DxSchedulerModule } from "devextreme-angular";
import query from "devextreme/data/query";
// ...
export class AppComponent {
    appointments = [{ 
        text: 'Meet with a customer', 
        startDate: new Date(2016, 4, 10, 11, 0), 
        endDate: new Date(2016, 4, 10, 13, 0) 
    }, 
    // ...
    ];
    getFilteredEmployees () {
        return query(this.appointments).filter("text", "contains", "meet").toArray();
    }
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
<dx-scheduler
    [dataSource]="getFilteredEmployees()">
</dx-scheduler>
See Also