Link Customization

You can customize the link appearance (color, width, link style, context menu) using link properties.

The following link properties are supported:

• from (id of the source event; required)

• to (id of the target event; required)

• type ("FinishToStart" | "StartToFinish" | "FinishToFinish" | "StartToStart"; if not specified, "FinishToStart" will be used)

• color (overrides the default color defined by the CSS theme)

• style (uses border-style CSS syntax, e.g. "solid", "dotted" - overrides the default style defined by the CSS theme)

• layer ("Above" | "Below" - whether the links is displayed above or below events; if not specified, "Above" will be used)

API: links.list.

The following examples draw one blue dependency with a three-pixel line. Its color and width are fields of the link data object.

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

Angular

Place the styled link in config.links; the typed config also contains its endpoint events.

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"}],
    links: [{id: "L1", from: 1, to: 2, type: "FinishToStart", color: "#2563eb", width: 3}]
  };

}

React

Pass the array of styled link objects through the links prop. Individual link fields remain inside that array.

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"}]}
      links={[{id: "L1", from: 1, to: 2, type: "FinishToStart", color: "#2563eb", width: 3}]}
    />
  </div>;
}

Vue

Keep the styling fields in the links collection declared in the script, then bind the collection with :links.

<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 links = [{id: "L1", from: 1, to: 2, type: "FinishToStart", color: "#2563eb", width: 3}];

</script>

<template>
  <div>

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