javascript html5 scheduler event links

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.

JavaScript Scheduler

In the JavaScript Scheduler, you can define links using the links.list property:

dp.links.list = [
  {
    from: firstId, 
    to: e.id(), 
    type:"FinishToStart", 
    color: "green"
  }
);

After initialization, you can also load links using the update() method:

const links = [
  {
    from: 1, 
    to: 2, 
    type:"FinishToStart", 
    color: "green"
  }
);

dp.update({
  links });

You can also use the links.load() method to load Scheduler links from a remote URL using an HTTP call:

dp.links.load(`/api/links`);

This method automatically adds the visible date range to the specified URL as start and end query string parameters.

If you load multiple data sets (e.g. resources, events, and links) at the same time it's better to merge all asynchronous HTTP calls using Promise.all() and update the Scheduler component only once.

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)

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

  // ...
}