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

const dp1 = new DayPilot.Gantt("dp1", {
            days: 30,
            columns: [
                {
                    title: "Name",
                    width: 50,
                    property: "text"
                },
                {
                    title: "Info",
                    width: 50,
                    property: "info"
                },
                {
                    title: "Duration",
                    width: 50
                }
            ],
            onBeforeRowHeaderRender: function (args) {
                const duration = args.task.duration();
                const html = duration.toString("d") + "d " + duration.toString("h") + "h";
                args.row.columns[2].html = html;
            },
            onRowMoved: function (args) {
                console.log("onRowMoved", args);
            }
        });
        const dp2 = new DayPilot.Gantt("dp2", {
            days: 30,
            columns: [
                {
                    title: "Name",
                    width: 50,
                    property: "text"
                },
                {
                    title: "Info",
                    width: 50,
                    property: "info"
                },
                {
                    title: "Duration",
                    width: 50
                }
            ],
            onBeforeRowHeaderRender: function (args) {
                const duration = args.task.duration();
                const html = duration.toString("d") + "d " + duration.toString("h") + "h";
                args.row.columns[2].html = html;
            },
            onRowMoved: function (args) {
                console.log("onRowMoved", args);
            }
        });

        const app = {
            loadData(dp) {
                let start = new DayPilot.Date().getDatePart();
                let last = null;
                for (let i = 0; i < 5; i++) {
                    const duration = Math.floor(Math.random() * 3) + 1; // 1 to 3
                    const end = start.addDays(duration);

                    const 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;
                }
            },
            init() {
                this.loadData(dp1);
                dp1.init();
                this.loadData(dp2);
                dp2.init();
            }
        };
        app.init();