React Scheduler - Array Only
To bind the Scheduler to an array, pass this array to the dataSource property.
jQuery
JavaScript
var 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") }, // ... ]; $(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-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>
Vue
App.vue
<template> <DxScheduler :data-source="appointments" :current-date="currentDate" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DxScheduler from 'devextreme-vue/scheduler'; export default { components: { DxScheduler }, data() { return { currentDate: new Date(2016, 4, 25), 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") }, // ... ]; } } } </script>
React
App.js
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import Scheduler from 'devextreme-react/scheduler'; const 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") }, // ... ]; class App extends React.Component { render() { return ( <Scheduler dataSource={appointments} defaultCurrentDate={new Date(2016, 4, 25)} /> ); } } export default App;
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-04-10T11:00:00.000Z"), endDate: new Date("2016-04-10T13:00:00.000Z") }, // ... ]; $(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-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>
Vue
App.vue
<template> <DxScheduler :data-source="dataSource" :current-date="currentDate" /> </template> <script> import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import DxScheduler from 'devextreme-vue/scheduler'; import Query from 'devextreme/data/query'; const appointments = [{ text: 'Meet with a customer', startDate: new Date("2016-04-10T11:00:00.000Z"), endDate: new Date("2016-04-10T13:00:00.000Z") }, // ... ]; const dataSource = Query(appointments).filter("text", "contains", "meet").toArray(); export default { components: { DxScheduler }, data() { return { currentDate: new Date(2016, 4, 10), dataSource } } } </script>
React
App.js
import React from 'react'; import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css'; import Scheduler from 'devextreme-react/scheduler'; import Query from 'devextreme/data/query'; const appointments = [{ text: 'Meet with a customer', startDate: new Date("2016-04-10T11:00:00.000Z"), endDate: new Date("2016-04-10T13:00:00.000Z") }, // ... ]; const dataSource = Query(appointments).filter("text", "contains", "meet").toArray(); class App extends React.Component { render() { return ( <Scheduler dataSource={dataSource} defaultCurrentDate={new Date(2016, 4, 10)} /> ); } } export default App;
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.