Scrollbar Position

JavaScript

Use scrollTo() to navigate to a date, scrollToResource() to reveal a resource, or setScrollX() and setScrollY() for pixel positions. Read the current position using getScrollX() and getScrollY(); use getViewPort() for visible dates and resources. Use setScroll() to set both pixel positions together.

Move by Date

Scroll one month forward from the current viewport:

const start = scheduler.getViewPort().start;
scheduler.scrollTo(start.addMonths(1));

Use a negative month offset to move backward. To place a particular date in the middle of the viewport:

scheduler.scrollTo("2027-12-01", null, "middle");

With infinite scrolling, a target outside the current timeline shifts the timeline while preserving the requested "left", "middle" or "right" alignment.

Change the Date Range and Scroll Position

Pass update() the new timeline settings and a target date together. For example, a date picker can change the displayed month and reveal the selected date:

const date = new DayPilot.Date("2027-11-15");
scheduler.update({
  startDate: date.firstDayOfMonth(),
  days: date.daysInMonth(),
  scrollTo: date
});

API: scrollTo.

Show Delivery scrolls to November 8 within the existing timeline. It calls scrollTo() without changing startDate or the number of days.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

Use the @ViewChild component's control property from the navigation button method.

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

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    <button (click)="action0()">Show Delivery</button>
    <daypilot-scheduler [config]="config" #scheduler></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  @ViewChild("scheduler") scheduler!: DayPilotSchedulerComponent;
  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: "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"}]
  };
  async action0() {
    const dp = this.scheduler.control;
    dp.scrollTo("2026-11-08");
  }
}

React

The button calls scrollTo() on the control stored by controlRef.

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

export default function SchedulerExample() {
  const scheduler = useRef(null);
  async function action0() {
    const dp = scheduler.current;
    dp.scrollTo("2026-11-08");
  }
  return <div>
    <button onClick={action0}>Show Delivery</button>
    <DayPilotScheduler
      controlRef={control => { scheduler.current = control; }}
      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: "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"}]}
    />
  </div>;
}

Vue

Use scheduler.value.control in the @click function; scheduler is the component's template ref.

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

const scheduler = ref(null);
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: "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"}];
async function action0() {
  const dp = scheduler.value.control;
  dp.scrollTo("2026-11-08");
}
</script>

<template>
  <div>
    <button @click="action0">Show Delivery</button>
    <DayPilotScheduler ref="scheduler"
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
    />
  </div>
</template>

protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
  {
      DayPilotScheduler1.SetScrollX(DateTime.Today.AddDays(-1));
      setDataSourceAndBind();
      DayPilotScheduler1.UpdateWithMessage("Welcome!");
  }
}

protected override void OnInit(InitArgs ea)
{
  ScrollTo(DateTime.Today);
  UpdateWithMessage("Welcome!", CallBackUpdateType.Full);
}