JavaScript/jQuery Scheduler - Customize Resource Headers

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