DevExtreme Angular - 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>
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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.