Vue Scheduler - Array Only

To bind the Scheduler to an array, pass this array to the dataSource property.

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>

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

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