Agent-readable demo data

Title

JavaScript Kanban Swimlanes | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

Read more about Kanban swim lanes [doc.daypilot.org].

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

Inline demo script 1

const dp = new DayPilot.Kanban("dp", {
            cellMarginBottom: 15,
            columns: [
                {name: "Analysis", id: "1", barColor: "#f9ba25"},
                {name: "Draft", id: "2"},
                {name: "Testing", id: "3"}
            ],
            swimlanes: [
                {name: "Swimlane A", id: "A"},
                {name: "Swimlane B", id: "B"}
            ]
        });

        const app = {
            loadData() {
                dp.cards.list = [
                    {id: "1", name: "Task 1", column: "1", swimlane: "A", text: "This is a description of task #1."},
                    {
                        id: "2",
                        name: "Task 2",
                        column: "1",
                        swimlane: "B",
                        text: "This is a description of task #2.",
                        barColor: "#6AA84F"
                    },
                    {
                        id: "3",
                        name: "Task 3",
                        column: "1",
                        swimlane: "B",
                        text: "This is a description of task #3.",
                        barColor: "#F6B26B"
                    }
                ];
            },
            init() {
                this.loadData();
                dp.init();
            }
        };
        app.init();