Agent-readable demo data

Title

JavaScript Gantt Chart | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

Read more about the Gantt task versions.

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

Inline demo script 1

var dp = new DayPilot.Gantt("dp");

        dp.taskGroupMode = "Auto";

        dp.days = 30;

        dp.startDate = new DayPilot.Date().getDatePart().addDays(-2);

        // generate and load sample tasks
        var start = new DayPilot.Date().getDatePart();
        var last = null;
        for (var i = 1; i <= 5; i++) {
            var duration = Math.floor(Math.random() * 3) + 5; // 3 to 5
            var end = start.addDays(duration);

            var e = new DayPilot.Task({
                start: start,
                end: end,
                id: DayPilot.guid(),
                text: "Task " + i,
                tags: {
                    info: "info text"
                },
                children: [
                    {
                        start: start,
                        end: end.addDays(2),
                        id: DayPilot.guid(),
                        text: "Subtask 1",
                        versions: [
                            {
                                start: start.addDays(1),
                                end: end.addDays(1),
                                text: "Version 1",
                                complete: 40,
                                htmlRight: "right1",
                                toolTip: "tooltip1"
                            },
                            {
                                start: start.addDays(-1),
                                end: end.addDays(-1),
                                text: "Version 2",
                                complete: 50,
                                htmlLeft: "left2",
                                htmlRight: "right2",
                                toolTip: "tooltip2",
                                barHidden: true,
                                cssClass: "test2"
                            },
                        ],
                        complete: Math.floor(Math.random() * 101) // 0 to 100
                    },
                    {
                        start: start,
                        end: end,
                        id: DayPilot.guid(),
                        text: "Subtask 2",
                        complete: Math.floor(Math.random() * 101) // 0 to 100
                    },
                    {
                        start: end,
                        id: DayPilot.guid(),
                        text: "Milestone 1",
                        type: "Milestone"
                    }

                ]
            });

            dp.tasks.add(e);

            if (last) {
                dp.links.add(new DayPilot.Link({
                    id: DayPilot.guid(),  // optional
                    from: last,
                    to: e.id(),
                    type: "FinishToStart"
                }));
            }
            last = e.id();
            start = end;

        }

        dp.columns = [
            {
                title: "Name",
                width: 50,
                property: "text"
            },
            {
                title: "Info",
                width: 50,
                property: "info"
            },
            {
                title: "Duration",
                width: 50
            }
        ];

        dp.onBeforeRowHeaderRender = function (args) {
            var duration = args.task.duration();
            var html = duration.toString("d") + "d " + duration.toString("h") + "h";
            args.row.columns[2].html = html;
        };


        dp.taskVersionsEnabled = true;
        dp.taskVersionPosition = "Above";

        dp.init();

        document.querySelector("#position").addEventListener("change", function() {
            dp.taskVersionPosition = this.value;
            dp.update();
        });