React Scheduler - Customize Resource Headers
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>");
- }
- });
- });
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.