Agent-readable demo data

Title

Kanban Column Active Areas | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

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

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

Inline demo script 1

const kanban = new DayPilot.Kanban("kanban", {
            cellMarginBottom: 40,
            onBeforeColumnHeaderRender: args => {
                args.header.areas = [
                    {
                        right: 5,
                        top: "calc(50% - 10px)",
                        height: 20,
                        width: 20,
                        borderRadius: "50%",
                        padding: 2,
                        cssClass: "add-button",
                        symbol: "../icons/daypilot.svg#plus-4",
                        onClick: (args) => {
                            const columnId = args.source.data.id;
                            app.addCard(columnId);
                        }
                    }
                ];
            }
        });
        kanban.init();

        const app = {
            async addCard(columnId) {
                const modal = await DayPilot.Modal.prompt("New task name:", "Task 3");
                if (modal.canceled) {
                    return;
                }
                const name = modal.result;
                kanban.cards.add({
                    id: DayPilot.guid(),
                    name,
                    column: columnId,
                    text: "This is a description of " + name + "."
                });
            },
            loadData() {
                const columns = [
                    {id: "1", name: "New", barColor: "#f9ba25"},
                    {id: "2", name: "Draft"},
                    {id: "3", name: "Implementation"}
                ];
                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."}
                ];
                kanban.update({columns, cards});
            },
            init() {
                app.loadData();
            }
        };
        app.init();