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:

• Link Loading

• Link Creation

• Link Customization

• Link Shape

• Link Bubble

• Link Context Menu

• Link Text

• Links API

JavaScript Scheduler

Demo

• JavaScript Scheduler: Event Links Demo

Tutorials

• ASP.NET Core Field Service Scheduling: Tasks, Routes, and Travel Time

• ASP.NET Core Shift Planning (Entity Framework, SQL Server)

• Machine/Production Job Scheduling Web Application (Spring/Java)

• PHP Machine/Production Job Scheduling Application (MySQL)

• Production Workflow Scheduling Tutorial (ASP.NET Core)

Styling Linked Events

JavaScript Scheduler: Styling Linked Events

• This tutorial explains how to style events based on whether there are links pointing to or from them. In this example, the event styling shows an event continuing on another row (resource).

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:

• Angular Scheduler: Event Links

React Scheduler

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

• React: Milestone Scheduler

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

  // ...
}