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>