JavaScript/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