You can display icons in using event active areas.

Several icon formats are supported:

  • area.icon - supports fonts icons, e.g. Font Awesome
  • area.image - inserted using <img> element, supports JPEG, PNG, GIF, SVG
  • area.symbol - inserted using SVG <use> element, supports SVG symbols defined inline or in an external file (supported since 2021.1.4880)

Icons inserted using active areas are supported during image export as well.

Demo

Examples

Font Icons

<head>
  <link href="/fontawesome/css/all.css" rel="stylesheet">
</head>

<body>

<script>

//...

dp.onBeforeEventRender = function(args) {
  args.data.areas = [
    { right: 2, top: 2, width: 24, height: 24, icon: "fas fa-user" }
  ];
};

</script>

</body>

Image Icons

<script>

// ...
dp.onBeforeEventRender = function(args) {
  args.data.areas = [
    { right: 2, top: 2, width: 24, height: 24, image: "user.png" }
  ];
};

</script>

SVG Symbols

The SVG symbol will be automatically scaled to fill the active area. Don't forget to specify the dimensions using height and width properties or using a combination of left/right and top/bottom.

The built-in SVG icon collection (daypilot.svg file) is monochromatic and it uses the default foreground color for the symbols. You can override the color using CSS or using args.data.fontColor property in onBeforeEventRender.

<script>

// ...

dp.onBeforeEventRender = function(args) {
  args.data.areas = [
    { right: 2, top: 2, width: 24, height: 24, icon: "daypilog.svg#figure" }
  ];
};

</script>

You can also specify a different hover color using :hover pseudoclass:

<style>
  .myicon {
    color: #ccc;
  }
  .myicon:hover {
    color: #999;
  }
<style>
<script>

// ...

dp.onBeforeEventRender = function(args) {
  args.data.areas = [
    { right: 2, top: 2, width: 24, height: 24, icon: "daypilog.svg#figure", cssClass: "myicon" }
  ];
};

</script>