Agent-readable demo data

Title

Kanban Card Active Areas | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

Read more about Kanban card active areas [doc.daypilot.org].

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

Inline demo script 1

const kanban = new DayPilot.Kanban("kanban", {
            onBeforeCardRender: args => {
                args.data.areas = [
                    {
                        right: 5,
                        top: 5,
                        width: 20,
                        height: 20,
                        cssClass: "card-info",
                        symbol: "../icons/daypilot.svg#i-circle",
                        onClick: (args) => {
                            const card = args.source;
                            DayPilot.Modal.alert("name: " + card.data.name);
                        }
                    }
                ];
            }
        });
        kanban.init();

        const app = {
            loadData() {
                const columns  = [
                    {name: "New", id: "1", barColor: "#f9ba25"},
                    {name: "Draft", id: "2"},
                    {name: "Implementation", id: "3"}
                ];

                const cards = [
                    {id: 1, "name": "Task 1", column: "1", text: "This is a description of task #1."},
                    {
                        id: 2,
                        "name": "Task 2",
                        column: "1",
                        text: "This is a description of task #2.",
                        barColor: "#ea3624",

                    }
                ];

                kanban.update({columns, cards});
            },
            init() {
                app.loadData();
            }
        };
        app.init();