Vue Scheduler - Customize Resource Headers
Implement a Vue template and assign it to the resourceCellTemplate property.
App.vue
- <template>
- <DxScheduler
- :data-source="schedulerData"
- :current-date="currentDate"
- :groups="['roomId']"
- resource-cell-template="resource-cell">
- <DxResource
- field-expr="roomId"
- :data-source="rooms" />
- <template #resource-cell="{data}">
- <i style="color: blue">{{data.text}}</i>
- </template>
- </DxScheduler>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxScheduler, { DxResource } from 'devextreme-vue/scheduler';
- export default {
- components: {
- DxScheduler,
- DxResource
- },
- data() {
- return {
- schedulerData: [{
- text: "Meeting",
- startDate: new Date("2016-04-24T09:10:00.000Z"),
- endDate: new Date("2016-04-24T11:20:00.000Z"),
- roomId: 1
- },
- // ...
- ],
- rooms: [
- { id: 1, text: 'Room101', color: 'green' },
- { id: 2, text: 'Room102', color: 'red' },
- // ...
- ],
- currentDate: new Date(2016, 4, 24)
- }
- }
- }
- </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.