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;
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.