javascript html5 scheduler 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 can 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: "2022-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
  • barVisible
  • htmlRight
  • htmlLeft
  • cssClass

Related Tutorials