Agent-readable demo data

Title

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

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

Compare the four 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.

• Canonical HTML: /demo/scheduler/eventlinkstypes.html
• Markdown companion: /demo/scheduler/eventlinkstypes.md
• Folder: /demo/scheduler/
• Root: /demo/
• Catalog: /demo/llms.txt

Inline demo script 1

/* 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();