Customize Resource Headers
jQuery
Specify the resourceCellTemplate callback function. Combine HTML markup with jQuery’s DOM manipulation methods.
index.js
var schedulerData = [{
text: "Meeting",
startDate: new Date("2016-04-24T09:10:00.000Z"),
endDate: new Date("2016-04-24T11:20:00.000Z"),
roomId: 1
}, // ... ];
var roomResource = {
fieldExpr: 'roomId',
dataSource: [
{ id: 1, text: 'Room101', color: 'green' },
{ id: 2, text: 'Room102', color: 'red' },
// ...
]
};
$(function () {
$("#schedulerContainer").dxScheduler({
dataSource: schedulerData,
currentDate: new Date(2016, 4, 24),
resources: [ roomResource ],
groups: [ 'roomId' ],
resourceCellTemplate: function (data, index, element) {
element.append("<i style='color: blue'>" + data.text + "</i>");
}
});
});Angular
Use the dxTemplate markup component designed by DevExpress.
app.component.html
app.component.ts
<dx-scheduler
[dataSource]="schedulerData"
[currentDate]="currentDate"
[groups]="['roomId']"
resourceCellTemplate="headerTemplate">
<dxi-resource
fieldExpr="roomId"
[dataSource]="rooms" >
</dxi-resource>
<div *dxTemplate="let data of 'headerTemplate'">
<i style="color: blue">{{data.text}}</i>
</div>
</dx-scheduler>
import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent {
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);
}
@NgModule({
imports: [
// ...
DxSchedulerModule
],
// ...
})Vue
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>React
Implement a callback function with custom template and assign it to the resourceCellRender property.
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import Scheduler, { Resource } from 'devextreme-react/scheduler';
const schedulerData = [{
text: 'His Girl Friday',
year: 1940,
img: 'images/movies/HisGirlFriday.jpg',
startDate: new Date("2016-04-24T09:10:00.000Z"),
endDate: new Date("2016-04-24T11:20:00.000Z")
}, // ... ];
const rooms = [
{ id: 1, text: 'Room101', color: 'green' },
{ id: 2, text: 'Room102', color: 'red' },
// ...
];
const groups = ['roomId'];
const renderResourceCell = (model) => {
return (
<i style={{color: "blue"}}>{model.data.text}</i>
);
}
class App extends React.Component {
render() {
return (
<Scheduler
dataSource={schedulerData}
defaultCurrentDate={new Date(2016, 4, 24)}
groups={groups}
resourceCellRender={renderResourceCell}
>
<Resource
fieldExpr="roomId"
dataSource={rooms}
/>
</Scheduler>
);
}
}
export default App;In addition, you can use a 3rd-party template engine to customize UI component appearance. For more information, see the 3rd-Party Template Engines article.
See Also
Feedback