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

API: eventHeight, eventStackingLineHeight.

The examples use 40-pixel event boxes and an 80% stacking-line height. Overlapping events partly cover one another vertically; their dates remain unchanged.

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: "First", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Second", resource: "A", start: "2026-11-04", end: "2026-11-07"}],
    eventHeight: 40,
    eventStackingLineHeight: 80
  };

}

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: "First", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Second", resource: "A", start: "2026-11-04", end: "2026-11-07"}]}
      eventHeight={40}
      eventStackingLineHeight={80}
    />
  </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: "First", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Second", resource: "A", start: "2026-11-04", end: "2026-11-07"}];
const eventHeight = 40;
const eventStackingLineHeight = 80;

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :eventHeight="eventHeight"
      :eventStackingLineHeight="eventStackingLineHeight"
    />
  </div>
</template>