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