DayPilot.Scheduler.linkCornerRadius

The linkCornerRadius property (number) sets the maximum corner radius of right-angled Scheduler event links, in pixels.

Available since 2026.3.7051.

Declaration

DayPilot.Scheduler.linkCornerRadius

Default Value

6

The default changed from 0 to 6 in version 2026.4.7094. Set linkCornerRadius: 0 explicitly to retain square corners when upgrading.

Notes

• Applies when DayPilot.Scheduler.linkShape is "RightAngled". Curved links ignore this property.

• The value is the maximum radius in pixels. Short link segments use a smaller radius automatically so that the corners and end arrow fit.

• Rounding preserves the link route and attachment points. The visible line and its mouse hit area use the same rounded corners.

• Use a non-negative finite number. Zero keeps sharp corners; negative, non-finite and non-number values are treated as zero.

Examples

JavaScript

This example assumes that the DayPilot library is loaded and a <div id="dp"></div> element is available.

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>

See Also

• DayPilot.Scheduler.linkShape

• DayPilot.Scheduler.linkWidth

• Link Shape

• Scheduler Event Links Demo