javascript scheduler svg icons

The Scheduler component can display icons in events 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.

See also other event customization options.

SVG Icons Bundled with DayPilot

These icons are included in daypilot.svg file (you can find this file in the download package, in demo/icons/daypilot.svg).

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, symbol: "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, symbol: "daypilog.svg#figure", cssClass: "myicon" }
  ];
};

</script>