Link Shape

The JavaScript Scheduler supports two link shapes (curved, right-angled). You can set the link shape using the linkShape property.

1. Curved Links

This is the default link shape. Curved links are available since version 2023.3.5701.

Scheduler config:

{
  linkShape: "Curved"
}

2. Right-Angled Links

This is the traditional link style, created using right-angled lines.

{
  linkShape: "RightAngled"
}

Rounded Corners

Use linkCornerRadius to set the maximum corner radius of right-angled links, in pixels:

{
  linkShape: "RightAngled",
  linkCornerRadius: 6
}

The default radius is 6 pixels since version 2026.4.7094; earlier versions used 0. Set it to 0 to retain sharp corners. Rounded corners preserve the right-angled route and its event attachment points. The Scheduler reduces the radius where short segments or arrowheads leave insufficient room.

This option is available in DayPilot Pro since 2026.3.7051. It does not affect "Curved" links.

Try the shape and radius settings in the JavaScript Scheduler Event Links Demo. See Link Customization for colors, line styles and layers.

Examples

These examples display two linked events with right-angled lines and a six-pixel corner radius. Use linkCornerRadius: 0 for sharp corners, or change linkShape to "Curved" for a curved route.

JavaScript

Load the DayPilot library and add a <div id="dp"></div> element to the page.

const dp = new DayPilot.Scheduler("dp", {
  startDate: "2026-09-01",
  days: 1,
  scale: "Hour",
  linkShape: "RightAngled",
  linkCornerRadius: 6,
  resources: [{id: "A", name: "Resource A"}, {id: "B", name: "Resource B"}],
  events: [
    {id: 1, text: "Task 1", resource: "A", start: "2026-09-01T08:00:00", end: "2026-09-01T10:00:00"},
    {id: 2, text: "Task 2", resource: "B", start: "2026-09-01T12:00:00", end: "2026-09-01T14:00:00"}
  ],
  links: [{id: "dependency-1", from: 1, to: 2, type: "FinishToStart"}]
});
dp.init();

Angular

Set the options and data in a typed DayPilot.SchedulerConfig object and bind it to the Angular component.

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-09-01",
    days: 1,
    scale: "Hour",
    linkShape: "RightAngled",
    linkCornerRadius: 6,
    resources: [{id: "A", name: "Resource A"}, {id: "B", name: "Resource B"}],
    events: [
      {id: 1, text: "Task 1", resource: "A", start: "2026-09-01T08:00:00", end: "2026-09-01T10:00:00"},
      {id: 2, text: "Task 2", resource: "B", start: "2026-09-01T12:00:00", end: "2026-09-01T14:00:00"}
    ],
    links: [{id: "dependency-1", from: 1, to: 2, type: "FinishToStart"}]
  };
}

React

Pass the display options and data as individual props to DayPilotScheduler.

import {DayPilotScheduler} from 'daypilot-pro-react';

const resources = [{id: "A", name: "Resource A"}, {id: "B", name: "Resource B"}];

const events = [
  {id: 1, text: "Task 1", resource: "A", start: "2026-09-01T08:00:00", end: "2026-09-01T10:00:00"},
  {id: 2, text: "Task 2", resource: "B", start: "2026-09-01T12:00:00", end: "2026-09-01T14:00:00"}
];

const links = [{id: "dependency-1", from: 1, to: 2, type: "FinishToStart"}];

export default function SchedulerExample() {
  return (
    <DayPilotScheduler
      startDate="2026-09-01"
      days={1}
      scale="Hour"
      linkShape="RightAngled"
      linkCornerRadius={6}
      resources={resources}
      events={events}
      links={links}
    />
  );
}

Vue

This Vue single-file component binds the options and data directly to DayPilotScheduler.

<script setup>
import {DayPilotScheduler} from 'daypilot-pro-vue';

const resources = [{id: "A", name: "Resource A"}, {id: "B", name: "Resource B"}];

const events = [
  {id: 1, text: "Task 1", resource: "A", start: "2026-09-01T08:00:00", end: "2026-09-01T10:00:00"},
  {id: 2, text: "Task 2", resource: "B", start: "2026-09-01T12:00:00", end: "2026-09-01T14:00:00"}
];

const links = [{id: "dependency-1", from: 1, to: 2, type: "FinishToStart"}];
</script>

<template>
  <DayPilotScheduler
    startDate="2026-09-01"
    :days="1"
    scale="Hour"
    linkShape="RightAngled"
    :linkCornerRadius="6"
    :resources="resources"
    :events="events"
    :links="links"
  />
</template>