By default, events are displayed at the topmost position within a Scheduler row. The order of concurring events can bet adjusted (see event sorting) but it doesn't allow setting a specific position if there is just one event at a certain position. If you want to display two or more events at the same vertical position, you can use virtual event containers.

html5 scheduler event containers row position default

Event containers force events with the same container id to be rendered at the same vertical position within a row:

html5 scheduler event containers row position

The container ID can be specified using the container property of the event data object:

dp.events.list = [
  {
    start: "2025-01-07T00:00:00",
    end: "2025-01-12T00:00:00",
    id: "39441891-f564-8fc3-caf4-a2e892f804de",
    resource: "A",
    text: "New Event 1",
  },
  {
    start: "2025-01-11T00:00:00",
    end: "2025-01-15T00:00:00",
    id: "ce83a6d7-d8ff-ea0c-d149-4c37691b29da",
    resource: "A",
    text: "New Event 2",
    container: 1
  },
  {
    start: "2025-01-17T00:00:00",
    end: "2025-01-22T00:00:00",
    id: "39fb5fba-d2cc-1c62-41a4-0b8df487f917",
    resource: "A",
    text: "New Event 3",
    container: 1
  }
];

Notes:

  • The containers are invisible and are not rendered. There is no DOM element that would represent the container.

  • The container id has no effect on events that are displayed in different rows.

  • Overlapping within a container is allowed but the events will be displayed at the same vertical position (corresponding to event stacking line height of 0%).

  • Available since version 2019.4.4052.

Demo

Tutorial