Agent-readable demo data

Title

Progressive Task Rendering (JavaScript Gantt Chart) | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

This Gantt chart displays 10,000 tasks. Read more about progressive task rendering.

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

Inline demo script 1

const dp = new DayPilot.Gantt("dp", {
            taskGroupMode: "Auto",
            heightSpec: "Max",
            height: 300,
            scrollDelayCells: 200,
            rowHeaderWidthAutoFit: true,
            startDate: new DayPilot.Date().addDays(-1),
            days: 30,
            columns: [
                {
                    title: "Name",
                    width: 50,
                    property: "text"
                },
                {
                    title: "Info",
                    width: 50,
                    property: "info"
                },
                {
                    title: "Duration",
                    width: 50,
                    format: function (args) {
                        const duration = args.task.duration();
                        return duration.toString("d") + "d " + duration.toString("h") + "h";
                    }
                }
            ],
            onTaskClicked: function (args) {
                DayPilot.Modal.alert(DayPilot.Util.escapeHtml("Clicked: " + args.e.id()));
            }
        });

        const app = {
            loadData() {
                const start = new DayPilot.Date().getDatePart();
                for (let i = 0; i < 10000; 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"
                        }
                    });
                    dp.tasks.add(e);
                }
            },
            init() {
                this.loadData();
                dp.init();
            }
        };
        app.init();