Link Creation (Drag and Drop)

You can enable the built-in support for drag and drop link creation.

linkCreateHandling: "Update"

When link creation is enabled, the JavaScript Scheduler component displays "link points" at the edges of events upon hovering. Users can drag and drop to connect link points between different events. Once connected, the Scheduler creates a link between the selected events.

The link points you select will also determine the link type, such as “FinishToStart”.

Saving the links

As soon as the link points are connected, the JavaScript Scheduler component fires onLinkCreate and onLinkCreated event handers. You can use these event handlers to store the new link in the database (using an HTTP call to an API endpoint).

{
  onLinkCreated: async args => {
    const params = {
      from: args.from,
      to: args.to,
      type: args.type
    };
    const {data} = await DayPilot.Http.post("/api/links", params);
  },
  // ...
}

The Scheduler creates the actual event after onLinkCreate is called and before onLinkCreated.

If you want to check custom business rules and prevent the link from being created, you can call args.preventDefault() in the onLinkCreate event handler.

Disabling the link points for selected events

You can disable the hover link points for selected events using the linkCreateDisabled property of the event data object. This setting doesn’t affect existing events (existing events will always be rendered).

The following example disables the link points for events that start in the past:

{
  onBeforeEventRender: args => {
    if (args.data.start < DayPilot.Date.now()) {
        args.data.linkCreateDisabled = true;
    }
  },
  // ...
}

Creating a link programmatically

You can also create a link programmatically using the Links API, namely the links.add() method:

dp.links.add({
  from: 1,
  to: 1,
  type: "FinishToFinish"
});