Event Stacking Line Height

The eventStackingLineHeight property lets you control the vertical overlap of concurrent events displayed by the JavaScript Scheduler component.

You can use any value in the range from 0 to 100.

• The default value is 100 (%). It means concurrent events will not overlap.

• If you use 0, all events will be displayed in a single line. The calculated row height will always equal to eventHeight in this case.

You may want to use this property in connection with a semi-transparent theme (e.g. "scheduler_transparent").

JavaScript

Example

const scheduler = new DayPilot.Scheduler("scheduler", {
  eventStackingLineHeight: 50,
  // ...
});
scheduler.init();

const events = [
  {
    "start": "2023-10-04T00:00:00",
    "end": "2023-10-09T00:00:00",
    "id": "a90da1e4-8afa-132b-0c7a-d08371695ed4",
    "resource": "R2",
    "text": "Event 1"
  },
  {
    "start": "2023-10-06T00:00:00",
    "end": "2023-10-11T00:00:00",
    "id": "5d7f46c7-a59e-aff3-64c2-38a486765759",
    "resource": "R2",
    "text": "Event 2"
  },
  {
    "start": "2023-10-08T00:00:00",
    "end": "2023-10-13T00:00:00",
    "id": "7300e63a-e8ba-ac8d-05bc-4acaa96b514a",
    "resource": "R2",
    "text": "Event 3"
  }
];
scheduler.update({events});

Tutorial

• JavaScript Scheduler: Event Placement Strategies