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>

View Demo

See Also