Vue Scheduler - JSON Data

To bind the Scheduler to data in the JSON format, assign the data's URL to the dataSource property.

jQuery
JavaScript
$(function() {
    $("#schedulerContainer").dxScheduler({
        dataSource: "http://url/to/json/data"
    });
});
Angular
HTML
TypeScript
<dx-scheduler
    dataSource="http://url/to/json/data">
</dx-scheduler>
import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
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';

export default {
    components: {
        DxScheduler
    },
    data() {
        return {
            dataSource: "http://url/to/json/data"
        }
    }
}
</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';

class App extends React.Component {
    render() {
        return (
            <Scheduler
                dataSource="http://url/to/json/data"
            />
        );
    }
}
export default App;

Note that you can also use a JSONP callback parameter supported by jQuery.ajax().

jQuery
JavaScript
$(function() {
    $("#schedulerContainer").dxScheduler({
        dataSource: "http://url/to/json/data/jsonpdata?callback=?"
    });
});
Angular
HTML
TypeScript
<dx-scheduler
    dataSource="http://url/to/json/data/jsonpdata?callback=?">
</dx-scheduler>
import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
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';

export default {
    components: {
        DxScheduler
    },
    data() {
        return {
            dataSource: "http://url/to/json/data/jsonpdata?callback=?"
        }
    }
}
</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';

class App extends React.Component {
    render() {
        return (
            <Scheduler
                dataSource="http://url/to/json/data/jsonpdata?callback=?"
            />
        );
    }
}
export default App;

If you need to process data after obtaining it, implement the CustomStore. For details, see the Custom Sources topic.

See Also