Link Creation (Drag and Drop)

You can enable the built-in support for drag and drop link creation.

linkCreateHandling: "Update"

When link creation is enabled, the JavaScript Scheduler component displays "link points" at the edges of events upon hovering. Users can drag and drop to connect link points between different events. Once connected, the Scheduler creates a link between the selected events.

The link points you select will also determine the link type, such as “FinishToStart”.

Saving the links

As soon as the link points are connected, the JavaScript Scheduler component fires onLinkCreate and onLinkCreated event handers. You can use these event handlers to store the new link in the database (using an HTTP call to an API endpoint).

{
  onLinkCreated: async args => {
    const params = {
      from: args.from,
      to: args.to,
      type: args.type
    };
    try { await DayPilot.Http.post("/api/links", params); }
    catch { await DayPilot.Modal.alert("Saving failed; the local dependency is still visible."); }
  },
  // ...
}

The Scheduler creates the actual link after onLinkCreate is called and before onLinkCreated.

If you want to check custom business rules and prevent the link from being created, you can call args.preventDefault() in the onLinkCreate event handler.

Disabling the link points for selected events

You can disable the hover link points for selected events using the linkCreateDisabled property of the event data object. This setting doesn’t affect existing events (existing links will always be rendered).

The following example disables the link points for events that start in the past:

{
  onBeforeEventRender: args => {
    if (new DayPilot.Date(args.data.start) < DayPilot.Date.now()) {
        args.data.linkCreateDisabled = true;
    }
  },
  // ...
}

Creating a link programmatically

You can also create a link programmatically using the Links API, namely the links.add() method:

dp.links.add({
  from: 1,
  to: 2,
  type: "FinishToFinish"
});

API: linkCreateHandling, onLinkCreated.

The framework examples enable interactive link creation and log the generated link ID and endpoint IDs. Use the persistence approach described above when saving the relationship to your backend.

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

Angular

Keep linkCreateHandling and onLinkCreated together in the typed Scheduler configuration.

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: "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"}],
    linkCreateHandling: "Update",
    onLinkCreated: args => { console.log("Created dependency", args.id, args.from, args.to); }
  };

}

React

Pass onLinkCreated as a function prop alongside linkCreateHandling.

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: "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"}]}
      linkCreateHandling={"Update"}
      onLinkCreated={args => { console.log("Created dependency", args.id, args.from, args.to); }}
    />
  </div>;
}

Vue

Bind the callback with :onLinkCreated, as shown in the template, and the handling mode with :linkCreateHandling.

<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: "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 linkCreateHandling = "Update";
const onLinkCreated = args => { console.log("Created dependency", args.id, args.from, args.to); };

</script>

<template>
  <div>

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