Event Versions

The JavaScript Scheduler component can display one or more additional versions of each event. You can use the versions to display history of event position changes or the previous state of an event (planned vs actual).

The versions will be displayed above or below the event box (see eventVersionPosition). They can have custom start, end, CSS, HTML, and other properties.

Event versions are read-only. They cannot be moved or resized using drag and drop.

By default, the event versions are non-blocking, they don't prevent other events or versions of other events to be displayed in the same line within a Scheduler row. You can make them blocking using the eventVersionsReserveSpace property.

CSS Styling

The event version boxes are marked with *_event_version CSS class (e.g. scheduler_default_event_version for the default CSS theme).

Example CSS style:

.scheduler_default_event.scheduler_default_event_version .scheduler_default_event_inner {
  background-color: #cfdde8;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
  background-size: 20px 20px;
}

JavaScript Scheduler

Event versions are disabled by default.

You can enable event versions using the eventVersionsEnabled property:

const scheduler = new DayPilot.Scheduler("dp", {
  eventVersionsEnabled: true,
  // ...
});

You can adjust the height and position using eventVersionHeight and eventVersionMargin properties:

const scheduler = new DayPilot.Scheduler("dp", {
  eventVersionsEnabled: true,
  eventVersionHeight: 15,
  eventVersionMargin: 5,
  // ...
});

Example of version data specified using the versions property of an event object:

const events = [
  {
    start: "2024-01-15T00:00:00",
    end: "2024-01-19T00:00:00",
    id: 1,
    resource: "A",
    text: "Event 1",
    versions: [
        {
            start: "2024-01-13T00:00:00",
            end: "2024-01-17T00:00:00",
            barHidden: true
        }
    ]
  }
];

scheduler.update({events});

Supported version properties:

• areas
• text
• html
• backColor
• fontColor
• borderColor
• backImage
• backRepeat
• complete
• barColor
• barBackColor
• barImageUrl
• barHidden
• htmlRight
• htmlLeft
• cssClass

Related Tutorials

• JavaScript Scheduler: Displaying Text above Events

API: eventVersionsEnabled, eventVersionPosition.

The framework examples place a saved baseline below the current plan. Move the main event to compare its new position with the version's unchanged dates.

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: "Current plan", resource: "A", start: "2026-11-04", end: "2026-11-08", versions: [{start: "2026-11-03", end: "2026-11-06", text: "Baseline", barColor: "#999999"}]}],
    eventVersionsEnabled: true,
    eventVersionPosition: "Below"
  };

}

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: "Current plan", resource: "A", start: "2026-11-04", end: "2026-11-08", versions: [{start: "2026-11-03", end: "2026-11-06", text: "Baseline", barColor: "#999999"}]}]}
      eventVersionsEnabled={true}
      eventVersionPosition={"Below"}
    />
  </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: "Current plan", resource: "A", start: "2026-11-04", end: "2026-11-08", versions: [{start: "2026-11-03", end: "2026-11-06", text: "Baseline", barColor: "#999999"}]}];
const eventVersionsEnabled = true;
const eventVersionPosition = "Below";

</script>

<template>
  <div>

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