DevExtreme Vue - 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