Agent-readable demo data

Title
Selecting Multiple Tasks (JavaScript Gantt Chart) | DayPilot Pro for JavaScript Demo
Tree
DayPilot JavaScript Demo
Catalog root
Default
Description
You can select multiple tasks by holding down the Ctrl key and clicking on the tasks. Read more about task multi-selecting.

Inline demo script 1

const dp = new DayPilot.Gantt("dp", {
            startDate: DayPilot.Date.today().addDays(-1),
            days: 60,
            onBeforeRowHeaderRender: (args) => {
                const duration = args.task.duration();
                const html = duration.toString("d") + "d " + duration.toString("h") + "h";
                args.row.columns[2].html = html;
            },
            allowMultiSelect: true,
            taskClickHandling: "Select",
            columns: [
                {
                    title: "Name",
                    width: 50,
                    property: "text"
                },
                {
                    title: "Info",
                    width: 50,
                    property: "info"
                },
                {
                    title: "Duration",
                    width: 50
                }
            ],
        });
        dp.init();

        const app = {
            loadData() {

                const tasks = [];
                const links = [];

                // generate and load sample tasks
                let start = DayPilot.Date.today();
                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 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"
                            }

                        ]
                    };

                    tasks.push(task);

                    if (last) {
                        links.push({
                            id: DayPilot.guid(),  // optional
                            from: last,
                            to: task.id,
                            type: "FinishToStart"
                        });
                    }
                    last = task.id;
                    start = end;
                }

                dp.update({
                    tasks,
                    links
                });

            },
            init() {
                this.loadData();
            },
        };
        app.init();