React Scheduler - JSON Data
To bind the Scheduler to data in the JSON format, assign the data's URL to the dataSource property.
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>
Note that you can also use a JSONP callback parameter supported by jQuery.ajax().
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>
If you need to process data after obtaining it, implement the CustomStore. For details, see the Custom Sources topic.
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.