Agent-readable demo data

Title

Task Moving between Gantt Charts | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

You can drag tasks (rows) between two Gantt Chart components. Read more about row moving between Gantt Charts.

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

Inline demo script 1

function init(id) {
            var dp = new DayPilot.Gantt(id);

            dp.days = 30;

            // generate and load sample tasks
            var start = new DayPilot.Date().getDatePart();
            var last = null;
            for (var i = 0; i < 5; i++) {
                var duration = Math.floor(Math.random() * 3) + 1; // 1 to 3
                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,
                            id: DayPilot.guid(),
                            text: "Subtask 1",
                            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.onRowMoved = function (args) {
                console.log("onRowMoved", args);
            };

            dp.init();

            return dp;
        }

        var dp1 = init("dp1");
        var dp2 = init("dp2");