React Scheduler - ArrayStore

If you want to extend the functionality of a JavaScript array, place it into the ArrayStore. It provides an interface for loading and editing data and allows you to handle data-related events.

jQuery
JavaScript
$(function() {
    $("#schedulerContainer").dxScheduler({
        dataSource: new DevExpress.data.ArrayStore({
            data: appointments,
            onLoaded: function () {
                // Event handling commands go here
            }
        })
    });
});
Angular
TypeScript
HTML
import { DxSchedulerModule } from "devextreme-angular";
import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
    appointments = [ /* ... */ ];
    appointmentStore = new ArrayStore({
        data: this.appointments,
        onLoaded: function () {
            // Event handling commands go here
        }
    });
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
<dx-scheduler
    [dataSource]="appointmentStore">
</dx-scheduler>
Vue
App.vue
<template>
    <DxScheduler
        :data-source="dataSource"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxScheduler from 'devextreme-vue/scheduler';
import ArrayStore from 'devextreme/data/array_store';

const appointments = [ /* ... */ ];
const dataSource = new ArrayStore({
    data: appointments,
    onLoaded: function () {
        // Event handling commands go here
    }
});

export default {
    components: {
        DxScheduler
    },
    data() {
        return {
            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 ArrayStore from 'devextreme/data/array_store';

const appointments = [ /* ... */ ];
const dataSource = new ArrayStore({
    data: appointments,
    onLoaded: function () {
        // Event handling commands go here
    }
});

class App extends React.Component {
    render() {
        return (
            <Scheduler
                dataSource={dataSource}
            />
        );
    }
}
export default App;

Data kept in the ArrayStore can be processed in the DataSource. Its purpose is similar to that of the Query, but the DataSource provides wider capabilities. For example, the DataSource can map objects from the array that underlies the ArrayStore as shown in the following code.

jQuery
JavaScript
var appointments = [{ 
    desc: 'Meet with a customer', 
    employee: "Mary Watson",
    from: new Date("2016-04-10T11:00:00.000Z"), 
    to: new Date("2016-04-10T13:00:00.000Z") 
}, // ...
];

$(function() {
    $("#schedulerContainer").dxScheduler({
        dataSource: new DevExpress.data.DataSource({
            store: appointments,
            map: function (item) {
                return {
                    text: item.employee + " : " + item.desc,
                    startDate: item.from,
                    endDate: item.to
                }   
            },
            paginate: false
        })
    });
});
Angular
TypeScript
HTML
import { DxSchedulerModule } from "devextreme-angular";
import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    appointments = [{ 
        desc: 'Meet with a customer', 
        employee: "Mary Watson",
        from: new Date("2016-04-10T11:00:00.000Z"), 
        to: new Date("2016-04-10T13:00:00.000Z") 
    }, 
    // ...
    ];
    appointmentDataSource = new DataSource({
        store: this.appointments,
        map: function (item) {
            return {
                text: item.employee + " : " + item.desc,
                startDate: item.from,
                endDate: item.to
            }   
        },
        paginate: false
    });
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
<dx-scheduler
    [dataSource]="appointmentDataSource">
</dx-scheduler>
Vue
App.vue
<template>
    <DxScheduler
        :data-source="dataSource"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxScheduler from 'devextreme-vue/scheduler';
import DataSource from "devextreme/data/data_source";

const appointments = [{ 
    desc: 'Meet with a customer', 
    employee: "Mary Watson",
    from: new Date("2016-04-10T11:00:00.000Z"), 
    to: new Date("2016-04-10T13:00:00.000Z") 
}, 
// ...
];
const dataSource = new DataSource({
    store: appointments,
    map: function (item) {
        return {
            text: item.employee + " : " + item.desc,
            startDate: item.from,
            endDate: item.to
        }   
    },
    paginate: false
});

export default {
    components: {
        DxScheduler
    },
    data() {
        return {
            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 DataSource from "devextreme/data/data_source";

const appointments = [{ 
    desc: 'Meet with a customer', 
    employee: "Mary Watson",
    from: new Date("2016-04-10T11:00:00.000Z"), 
    to: new Date("2016-04-10T13:00:00.000Z") 
}, 
// ...
];
const dataSource = new DataSource({
    store: appointments,
    map: function (item) {
        return {
            text: item.employee + " : " + item.desc,
            startDate: item.from,
            endDate: item.to
        }   
    },
    paginate: false
});

class App extends React.Component {
    render() {
        return (
            <Scheduler
                dataSource={dataSource}
            />
        );
    }
}
export default App;
See Also