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;

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