Link Loading

Loading link data from an URL

You can load link data in the JavaScript Scheduler using a shortcut links.load() method:

dp.links.load(`/api/links`);

This method loads the link data from the remote URL.

It automatically adds the visible date range to the specified URL as start and end query string parameters. That lets you limit the links when loading the data from a database on the server side.

Loading link data from a custom source

You can also load link data manually and update the Scheduler to display them:

const {data: links} = await DayPilot.Http.get(`/api/links`);
dp.update({links});

If you load multiple data sets (e.g. resources, events, and links) at the same time it's better to merge all asynchronous HTTP calls using Promise.all() and update the Scheduler component only once.

Data format

The link data object must specify the source and target event ID using the from and to properties. The link type (FinishToStart, StartToStart, StartToFinish, FinishToFinish) is optional - if not specified, the Scheduler uses “FinishToStart”:

const list = [
  {
    from: 1, 
    to: 2, 
    type:"FinishToStart", 
    color: "green"
  }
];

You can customize the link appearance using additional properties, such as color. All available properties are listed in the DayPilot.Link.data object documentation.

Invalid Loading Responses

In Pro since version 2026.4.7086, collection loading methods reject empty response bodies, malformed JSON and JSON values that are not arrays. Return [] when the collection is empty.

Supply an error callback to handle these failures. Its args.request is the original XMLHttpRequest; args.exception provides a parsing or validation exception when applicable. The success callback is not called and the existing collection is retained.

dp.links.load("/api/links", null, args => {
  console.error("Loading failed", args.request.status, args.exception);
});

API: update.

The buttons below load a JSON link array from /api/links using DayPilot.Http.get() and apply it with update(). The endpoint events are already present in these examples.

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

Angular

The asynchronous component method obtains the Scheduler through @ViewChild, then updates its links after the request completes.

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()">Load dependencies</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;
    try { const {data} = await DayPilot.Http.get("/api/links"); dp.update({links: data}); }
    catch { await DayPilot.Modal.alert("Could not load dependencies."); }
  }
}

React

Use controlRef to retain the Scheduler API for the Load dependencies button. The response is applied through that control ref.

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;
    try { const {data} = await DayPilot.Http.get("/api/links"); dp.update({links: data}); }
    catch { await DayPilot.Modal.alert("Could not load dependencies."); }
  }
  return <div>
    <button onClick={action0}>Load dependencies</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

The @click function updates links through scheduler.value.control, using the component ref declared in <script setup>.

<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;
  try { const {data} = await DayPilot.Http.get("/api/links"); dp.update({links: data}); }
  catch { await DayPilot.Modal.alert("Could not load dependencies."); }
}
</script>

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