Dependency Links in the Scheduler Component

The Scheduler component can display links between two events. You can use the links to highlight dependencies between tasks or join related events visually.

  • Both linked events need to be loaded and within the visible date range (grid start and end).

  • You can specify where the link will start and end (event start/end). The following link types are supported: StartToStart, StartToFinish, FinishToStart, FinishToFinish.

  • A link connecting two adjacent events (FinishToStart) will be displayed as a dot.

  • You can customize the link appearance (color, style, layer and CSS).

  • You can display additional information about a link on hover using a bubble.

  • Users can perform link-related actions using a context menu. 

  • You can enable drag and drop link adding.

Documentation:

JavaScript Scheduler

Demo

Tutorials

Angular Scheduler

In the Angular Scheduler component, you can define links using the links property of the config object:

config: DayPilot.SchedulerConfig = {

  // ...

  links: [
    { from: "1", to: "2", type: "FinishToFinish"},
    { from: "1", to: "3", type: "FinishToFinish"},
  ]

}

Tutorial:

React Scheduler

react milestone scheduler component

This tutorial shows how to use links to show dependencies between milestones displayed by the React Scheduler component:

ASP.NET MVC

protected override void OnInit(InitArgs ea)
{
  Links = new LinkCollection();
  links.Add("6", "16");  // link from Event 6 to Event 16

  // ...
}