All docs
V23.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

jQuery Scheduler - 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;

View Demo

See Also