Event Types

You can define your own event types and customize the event depending on the type.

Store application-defined categories in a custom field such as tags.type and change the event appearance accordingly. These categories are separate from the Scheduler's type: "Milestone" display setting.

JavaScript

Example

In this example, the event type is stored in tags.type property:

dp.events.list = [
  {
    id: 1,
    text: "Event 1",
    start: "2022-03-05T00:00:00",
    end: "2022-03-09T00:00:00",
    resource: "R2",
    tags: {
      type: "standard"
    }
  },
  {
    id: 2,
    text: "Event 2",
    start: "2022-03-07T00:00:00",
    end: "2022-03-15T00:00:00",
    resource: "R4",
    tags: {
      type: "important"
    }
  },
];

Event customization:

const dp = new DayPilot.Scheduler("dp", {

  // ...

  onBeforeEventRender: args => {
    const type = args.data.tags && args.data.tags.type;
    switch (type) {
      case "standard":
        args.data.barColor = "#38761d";
        break;
      case "important":
        args.data.barColor = "#cc0000";
        break;
    }
  },

  // ...

});

Tutorial

• JavaScript Scheduler: Event Types

API: events.list, resources.

The framework examples illustrate a different use of event types: an ordinary Implementation task and a zero-duration Release milestone. type: "Milestone" selects the Scheduler's milestone display. Store application categories separately in tags, as in the JavaScript example above.

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: "Implementation", resource: "A", start: "2026-11-03", end: "2026-11-06", type: "Task"}, {id: 2, text: "Release", resource: "A", start: "2026-11-08", end: "2026-11-08", type: "Milestone"}]
  };

}

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: "Implementation", resource: "A", start: "2026-11-03", end: "2026-11-06", type: "Task"}, {id: 2, text: "Release", resource: "A", start: "2026-11-08", end: "2026-11-08", type: "Milestone"}]}
    />
  </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: "Implementation", resource: "A", start: "2026-11-03", end: "2026-11-06", type: "Task"}, {id: 2, text: "Release", resource: "A", start: "2026-11-08", end: "2026-11-08", type: "Milestone"}];

</script>

<template>
  <div>

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