React Scheduler - Customize Resource Headers

For AngularJS and Knockout apps, DevExtreme provides the dxTemplate markup component. The following code shows how to use dxTemplate to define custom templates for resource headers.

Angular
HTML
TypeScript
<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
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
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { Scheduler, Resource } from 'devextreme-react/scheduler';

const schedulerData = [{
    text: 'Meeting',
    startDate: new Date("2016-04-24T09:10:00.000Z"),
    endDate: new Date("2016-04-24T11:20:00.000Z"),
    roomId: 1
},
// ...
];
const rooms = [
    { id: 1, text: 'Room101', color: 'green' },
    { id: 2, text: 'Room102', color: 'red' },
    // ...
];
const currentDate = new Date(2016, 4, 24);
const renderResourceCell = (data) => <i style="color: blue">{data.text}</i>;

class App extends React.Component {
    render() {
        return (
            <Scheduler
                dataSource={schedulerData}
                defaultCurrentDate={currentDate}
                groups={['roomId']}
                resourceCellRender={renderResourceCell}>
                <Resource
                    fieldExpr="roomId"
                    dataSource={rooms} />
            </Scheduler>
        );
    }
}
export default App;
AngularJS
HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-scheduler="{
        dataSource: schedulerData,
        currentDate: currentDate,
        resources: [ roomResource ],
        groups: [ 'roomId' ],
        resourceCellTemplate: 'header'
    }" dx-item-alias="item">
        <div data-options="dxTemplate: { name: 'header' }">
            <i style="color: blue">{{item.text}}</i>
        </div>
    </div>
</div>
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function DemoController($scope) {
        $scope.schedulerData = [{
            text: "Meeting",
            startDate: new Date("2016-04-24T09:10:00.000Z"),
            endDate: new Date("2016-04-24T11:20:00.000Z"),
            roomId: 1
        },
        // ...
        ];
        $scope.roomResource = {
            fieldExpr: 'roomId',
            dataSource: [
                { id: 1, text: 'Room101', color: 'green' },
                { id: 2, text: 'Room102', color: 'red' },
                // ...
            ]
        };
        $scope.currentDate = new Date(2016, 4, 24);
    });
NOTE
The dx-item-alias directive specifies the variable that is used to access the item object.
Knockout
HTML
JavaScript
<div data-bind="dxScheduler: {
    dataSource: schedulerData,
    currentDate: currentDate,
    resources: [ roomResource ],
    groups: [ 'roomId' ],
    resourceCellTemplate: 'header'
}">
    <div data-options="dxTemplate: { name: 'header' }">
        <i style="color: blue" data-bind="text: text"></i>
    </div>
</div>
var viewModel= {
    schedulerData: [{
        text: "Meeting",
        startDate: new Date("2016-04-24T09:10:00.000Z"),
        endDate: new Date("2016-04-24T11:20:00.000Z"),
        roomId: 1
    },
    // ...
    ],
    roomResource: {
        fieldExpr: 'roomId',
        dataSource: [
            { id: 1, text: 'Room101', color: 'green' },
            { id: 2, text: 'Room102', color: 'red' },
            // ...
        ]
    },
    currentDate: new Date(2016, 4, 24)
};

ko.applyBindings(viewModel);
Vue
App.vue
<template>
    <DxScheduler
        :data-source="appointments"
        :current-date="currentDate"
        :groups="groups"
        resource-cell-template="resourceCellTemplate"
    >
        <DxResource
          :data-source="resources"
          field-expr="roomId"
        />

        <template #resourceCellTemplate="{ 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 {
            currentDate: new Date(2016, 4, 24),
            appointments: [{
                text: "Meeting",
                startDate: new Date("2016-04-24T09:10:00.000Z"),
                endDate: new Date("2016-04-24T11:20:00.000Z"),
                roomId: 1
            }, 
            // ...
            ],
            resources: [
                { id: 1, text: "Room101", color: "green" },
                { id: 2, text: "Room102", color: "red" },
                // ...
            ],
            groups: ["roomId"]
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Scheduler, { Resource } from 'devextreme-react/scheduler';

const appointments = [{
    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 resources = [
    { 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={appointments}
                defaultCurrentDate={new Date(2016, 4, 24)}
                groups={groups}
                resourceCellRender={renderResourceCell}
            >
                <Resource
                  fieldExpr="roomId"
                  dataSource={resources}
                />
          </Scheduler>
        );
    }
}
export default App;

If you use jQuery alone, use DOM manipulation methods to combine the HTML markup for resource headers. To apply this markup, use the resourceCellTemplate callback function as shown in the following code.

JavaScript
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>");
        }
    });
});

View Demo

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