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

View Demo

See Also