Exact Event Duration

By default, the JavaScript Scheduler displays events in boxes that have dimensions aligned with the Scheduler grid cells.

You can change this behavior and display events without alignment using the useEventBoxes property.

Aligned Boxes (Default)

The default value of useEventBoxes is "Always". It aligns event boxes with the grid.

Exact Duration

After switching the useEventBoxes value to "Never", the start and end of the event box will be based on the exact position of the event start and end date/time value.

If the subsequent events only share a single point in time, they are not considered as overlapping and they will be displayed at the same vertical position within a row.

You can also use the "ShortEventsOnly" value which will use the aligned boxes only for events shorter than a single Scheduler cell.

Snap to Grid

Note that the useEventBoxes only affects how existing Scheduler events will be displayed. To learn how to control the alignment during creation of new events or during drag and drop moving/resizing, please see the Snap to Grid feature documentation.

Normally, you will want to disable snap to grid when using useEventBoxes="Never" to make the Scheduler drag and drop behavior consistent with event rendering.

Related Tutorials

• JavaScript Scheduler: Event Placement Strategies

JavaScript Scheduler

In the JavaScript Scheduler component, use the useEventBoxes property of the DayPilot.Scheduler object to change the behavior.

Example:

<div id="scheduler"></div>
<script type="text/javascript">
  const scheduler = new DayPilot.Scheduler("scheduler", {
    useEventBoxes: "Never",
    snapToGrid: false
  });
  scheduler.init();
</script>

API: useEventBoxes.

The examples use useEventBoxes: "Never" with noon start and end times, so the box edges fall inside the day cells.

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: "Half-day boundaries", resource: "A", start: "2026-11-03T12:00:00", end: "2026-11-05T12:00:00"}],
    useEventBoxes: "Never"
  };

}

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: "Half-day boundaries", resource: "A", start: "2026-11-03T12:00:00", end: "2026-11-05T12:00:00"}]}
      useEventBoxes={"Never"}
    />
  </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: "Half-day boundaries", resource: "A", start: "2026-11-03T12:00:00", end: "2026-11-05T12:00:00"}];
const useEventBoxes = "Never";

</script>

<template>
  <div>

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

<DayPilot:DayPilotScheduler runat="server" id="DayPilotScheduler1"
  ...
  UseEventBoxes = "Never"
/>

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ...
  UseEventBoxes = UseEventBoxesType.Never
})