Event 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).

• Icon List & Preview

Demo

• Scheduler Event Icons 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: "daypilot.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: "daypilot.svg#figure", cssClass: "myicon" }
  ];
};

</script>

API: onBeforeEventRender.

The framework examples add the figure symbol from the bundled SVG icon set. Copy demo/icons/daypilot.svg to a publicly served /assets/daypilot.svg URL, or adjust the example's symbol path to your application's asset location.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}],
    onBeforeEventRender: args => { args.data.areas = [{right: 4, top: 4, width: 20, height: 20, symbol: "/assets/daypilot.svg#figure"}]; }
  };

}

React

import React from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
      onBeforeEventRender={args => { args.data.areas = [{right: 4, top: 4, width: 20, height: 20, symbol: "/assets/daypilot.svg#figure"}]; }}
    />
  </div>;
}

Vue

<script setup>
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
const onBeforeEventRender = args => { args.data.areas = [{right: 4, top: 4, width: 20, height: 20, symbol: "/assets/daypilot.svg#figure"}]; };

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :onBeforeEventRender="onBeforeEventRender"
    />
  </div>
</template>