React Scheduler - Array Only

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

TypeScript
HTML
  • import { DxSchedulerModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • appointments = [{
  • text: "Meet with a customer",
  • startDate: new Date("2016-04-25T01:30:00.000Z"),
  • endDate: new Date("2016-04-25T03:30:00.000Z")
  • }, {
  • text: "Discuss results",
  • startDate: new Date("2016-04-25T09:00:00.000Z"),
  • endDate: new Date("2016-04-25T10:00:00.000Z")
  • }];
  • }
  • @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'.

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-04-10T11:00:00.000Z"),
  • endDate: new Date("2016-04-10T13:00:00.000Z")
  • },
  • // ...
  • ];
  • getFilteredEmployees () {
  • return query(this.appointments).filter("text", "contains", "meet").toArray();
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSchedulerModule
  • ],
  • // ...
  • })
  • <dx-scheduler
  • [dataSource]="getFilteredEmployees()">
  • </dx-scheduler>
See Also