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 events 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 the subsequent events only share a single point in time, the 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 on for events shorted that 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>

Angular Scheduler

You can set the event box alignment mode using the useEventBoxes property of the config object in the Angular Scheduler component.

import {Component} from '@angular/core';
import {DayPilot, DayPilotSchedulerComponent} from "daypilot-pro-angular";

@Component({
  selector: 'angular-scheduler-example',
  template: `<daypilot-scheduler [config]="config"></daypilot-scheduler>`
})
export class AppComponent {

  config: DayPilot.SchedulerConfig = {
    useEventBoxes: "Never",
    snapToGrid: false,
    // ...
  }

}

React Scheduler

In the React Scheduler component, use the useEventBoxes attribute of the React Scheduler JSX element (<DayPilotScheduler>).

import React, {Component} from 'react';
import {DayPilotScheduler} from "daypilot-pro-react";

class Scheduler extends Component {
    render() {
        return (
            <div>
                <DayPilotScheduler
                    useEventBoxes={"Never"}
                    snapToGrid={false}
                />
            </div>
        );
    }
}

export default Scheduler;

Vue Scheduler

The Vue Scheduler lets you set the event alignment using the useEventBoxes property of the :config object.

<template>
  <DayPilotScheduler id="dp" :config="config" />
</template>

<script>
import {DayPilot, DayPilotScheduler} from 'daypilot-pro-vue'

export default {
  name: 'Scheduler',
  data: function() {
    return {
      config: {
        useEventBoxes: "Never",
        snapToGrid: false,
        // ...
      },
    }
  },
  components: {
    DayPilotScheduler
  },
}
</script>

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

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