html5-scheduler-event-links.png

The Scheduler can display links between two events.

Available since DayPilot Pro 8.0.

JavaScript

You can define the links using .links.list property:

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

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

Tutorial

Angular

Tutorial:

ASP.NET MVC

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

  // ...
}