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>
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
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.