Automatic Scrolling (AutoScroll)

The JavaScript Scheduler can scroll the grid automatically (vertically and horizontally) when you reach the edges of the visible area. You can configure the behavior using the autoScroll property.

By default, this feature is turned on during drag and drop operations (event moving, event resizing, time range selecting, link creation).

The scrolling starts after the number of milliseconds specified using autoScrollDelay.

Options:

• Drag (default)

• Always

• Disabled

JavaScript

<div id="dp"></div>
<script>
  const scheduler = new DayPilot.Scheduler("dp", {
    autoScroll: "Always",
    autoScrollDelay: 50,
    // ...
  });
  scheduler.init();
</script>

API: heightSpec, height, autoScroll.

In the examples, drag an event toward the visible grid edge to trigger autoScroll: "Drag" and reach dates outside the current viewport.

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: 365,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}],
    heightSpec: "Fixed",
    height: 300,
    autoScroll: "Drag"
  };

}

React

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

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={365}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
      heightSpec={"Fixed"}
      height={300}
      autoScroll={"Drag"}
    />
  </div>;
}

Vue

<script setup>
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const startDate = "2026-11-01";
const days = 365;
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: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
const heightSpec = "Fixed";
const height = 300;
const autoScroll = "Drag";

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :heightSpec="heightSpec"
      :height="height"
      :autoScroll="autoScroll"
    />
  </div>
</template>

<DayPilot:DayPilotScheduler runat="server" id="DayPilotScheduler1"
  ...
  AutoScroll = "Always"
/>

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ...
  AutoScroll = AutoScrollType.Always
})