javascript scheduler row header icons

There are two ways to add icons to the Scheduler row headers:

  • by specifying custom HTML for the row header

  • by adding an active area

To customize the row headers, use the onBeforeRowHeaderRender event handler.

The best way is to use active areas. It provides built-in support for different icon formats:

  • SVG symbols using the symbol property

  • Images (PNG, GIF, JPEG, SVG) using the image property

  • Font icons (e.g. Font Awesome) using the icon property

SVG Symbol Icons

DayPilot Pro includes a set of SVG symbol icons which you can find in the demo/cons/daypilot.svg file in the download package.

JavaScript Scheduler

In the JavaScript Scheduler, you can use onBeforeRowHeaderRender event handler to add an icon using an active area.

This example stores the icon information (SVG symbol and color) in the tags property of the resources[] array.

const dp = new DayPilot.Scheduler("dp", {
  rowHeaderColumns: [
    {name: "Name"},
    {name: "Image"}
  ],
  onBeforeRowHeaderRender: args => {
    const tags = args.row.data.tags;
    if (tags && tags.symbol) {
      args.row.columns[1].areas = [
        {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          symbol: tags.symbol,
          fontColor: tags.color
        }
      ];
    }
  },
  // ...
});
dp.resources = [
  {name: "Resource 1", id: "R1", tags: {symbol: "daypilot.svg#figure", color: "#660000"} },
  {name: "Resource 2", id: "R2", tags: {symbol: "daypilot.svg#figure", color: "#990000"} },
  {name: "Resource 3", id: "R3", tags: {symbol: "daypilot.svg#figure", color: "#cc0000"} },
  {name: "Resource 4", id: "R4", tags: {symbol: "daypilot.svg#figure", color: "#e06666"} },
  {name: "Resource 5", id: "R5", tags: {symbol: "daypilot.svg#figure", color: "#ea9999"} },
  {name: "Resource 6", id: "R6" },
  {name: "Resource 7", id: "R7" },
  {name: "Resource 8", id: "R8"},
  {name: "Resource 9", id: "R9"},
];
dp.init();