Agent-readable demo data

Title

Kanban Card Creating | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

Read more about Kanban card creating [doc.daypilot.org].

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

Inline demo script 1

const kanban = new DayPilot.Kanban("kanban", {
            cellMarginBottom: 40,
            onBeforeCellRender: (args) => {
                args.cell.areas = [{
                    right: 5,
                    bottom: 5,
                    width: 100,
                    height: 30,
                    html: "Add",
                    cssClass: "add-button",
                    action: "JavaScript",
                    onClick: (clickArgs) => {
                        app.add(args.cell.column.data.id);
                    }
                }];
            }
        });
        kanban.init();

        const app = {
            async add(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: name, column: columnId, text: "This is a description of " + name + "."});
            },
            loadData() {
                const columns = [
                    {name: "Analysis", id: "1", barColor: "#f9ba25"},
                    {name: "Draft", id: "2"},
                    {name: "Testing", 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();