By default, events are displayed in the topmost position within a Scheduler row. The order of concurring events can bet adjusted (event sorting) but it doesn't allow setting a specific position if there is just one event at a certain position.

html5-scheduler-event-containers-row-position-default.png

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.png

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

dp.events.list = [
  {
    "start": "2019-01-07T00:00:00",
    "end": "2019-01-12T00:00:00",
    "id": "39441891-f564-8fc3-caf4-a2e892f804de",
    "resource": "A",
    "text": "New Event 1",
  },
  {
    "start": "2019-01-11T00:00:00",
    "end": "2019-01-15T00:00:00",
    "id": "ce83a6d7-d8ff-ea0c-d149-4c37691b29da",
    "resource": "A",
    "text": "New Event 2",
    container: 1
  },
  {
    "start": "2019-01-17T00:00:00",
    "end": "2019-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