# Link Types (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo

> Compare the four [link types](https://doc.daypilot.org/scheduler/link-types/) on the same weekly timeline. Each pair shows which start or finish connects the predecessor to its successor. Hover a link for an explanation.

## Links

- Canonical HTML: /demo/scheduler/eventlinkstypes.html
- Source HTML folder: /demo/scheduler/
- Catalog root: /demo/
- Catalog: /demo/llms.txt

## Source

### Inline demo script 1

```javascript
/* global DayPilot */
        const dp = new DayPilot.Scheduler("dp", {
            startDate: "2027-04-06",
            days: 7,
            scale: "Day",
            timeHeaders: [
                {groupBy: "Month", format: "MMMM yyyy"},
                {groupBy: "Day", format: "ddd d"}
            ],
            cellWidthSpec: "Auto",
            cellWidthMin: 90,
            rowHeaderColumns: [
                {title: "Dependency", display: "name", width: 160},
                {title: "Role", display: "role", width: 100}
            ],
            useEventBoxes: "Never",
            eventHeight: 50,
            heightSpec: "Max",
            height: 500,
            eventMoveHandling: "Disabled",
            eventResizeHandling: "Disabled",
            timeRangeSelectedHandling: "Disabled",
            linkBubble: new DayPilot.Bubble(),
            resources: [
                {id: "FS-from", name: "Finish to start (FS)", role: "Predecessor"},
                {id: "FS-to", name: "Finish to start (FS)", role: "Successor"},
                {id: "SS-from", name: "Start to start (SS)", role: "Predecessor"},
                {id: "SS-to", name: "Start to start (SS)", role: "Successor"},
                {id: "FF-from", name: "Finish to finish (FF)", role: "Predecessor"},
                {id: "FF-to", name: "Finish to finish (FF)", role: "Successor"},
                {id: "SF-from", name: "Start to finish (SF)", role: "Predecessor"},
                {id: "SF-to", name: "Start to finish (SF)", role: "Successor"}
            ],
            onBeforeEventRender: args => {
                args.data.html = `<div class="link-type-event"><strong>${args.data.text}</strong><span>${args.data.caption}</span></div>`;
            }
        });
        dp.init();

        const app = {
            init() {
                this.loadData();
            },
            loadData() {
                const events = [
                    {
                        id: "FS-from",
                        resource: "FS-from",
                        text: "Design",
                        caption: "Finishes first",
                        start: "2027-04-07T12:00:00",
                        end: "2027-04-09T12:00:00",
                        barColor: "#3c78d8"
                    },
                    {
                        id: "FS-to",
                        resource: "FS-to",
                        text: "Build",
                        caption: "Starts after Design",
                        start: "2027-04-09T12:00:00",
                        end: "2027-04-11T12:00:00",
                        barColor: "#3c78d8"
                    },
                    {
                        id: "SS-from",
                        resource: "SS-from",
                        text: "Planning",
                        caption: "Starts first",
                        start: "2027-04-07T12:00:00",
                        end: "2027-04-09T12:00:00",
                        barColor: "#6aa84f"
                    },
                    {
                        id: "SS-to",
                        resource: "SS-to",
                        text: "Procurement",
                        caption: "Starts with Planning",
                        start: "2027-04-07T12:00:00",
                        end: "2027-04-10T12:00:00",
                        barColor: "#6aa84f"
                    },
                    {
                        id: "FF-from",
                        resource: "FF-from",
                        text: "Testing",
                        caption: "Finishes first",
                        start: "2027-04-10",
                        end: "2027-04-12",
                        barColor: "#c98512"
                    },
                    {
                        id: "FF-to",
                        resource: "FF-to",
                        text: "Documentation",
                        caption: "Ends with Testing",
                        start: "2027-04-09",
                        end: "2027-04-12",
                        barColor: "#c98512"
                    },
                    {
                        id: "SF-from",
                        resource: "SF-from",
                        text: "New shift",
                        caption: "Starts at handover",
                        start: "2027-04-09T12:00:00",
                        end: "2027-04-11T12:00:00",
                        barColor: "#8e63b5"
                    },
                    {
                        id: "SF-to",
                        resource: "SF-to",
                        text: "Old shift",
                        caption: "Ends at handover",
                        start: "2027-04-07T12:00:00",
                        end: "2027-04-09T12:00:00",
                        barColor: "#8e63b5"
                    }
                ];
                const links = [
                    {id: "FS", from: "FS-from", to: "FS-to", type: "FinishToStart", color: "#3c78d8", bubbleHtml: "Build can start after Design finishes."},
                    {id: "SS", from: "SS-from", to: "SS-to", type: "StartToStart", color: "#6aa84f", bubbleHtml: "Procurement can start when Planning starts."},
                    {id: "FF", from: "FF-from", to: "FF-to", type: "FinishToFinish", color: "#c98512", bubbleHtml: "Documentation can finish when Testing finishes."},
                    {id: "SF", from: "SF-from", to: "SF-to", type: "StartToFinish", color: "#8e63b5", bubbleHtml: "The old shift can finish when the new shift starts."}
                ];
                dp.update({events, links});
            }
        };
        app.init();
```