Agent-readable demo data

Title
Card Bubble (JavaScript Kanban) | DayPilot Pro for JavaScript Demo
Tree
DayPilot JavaScript Demo
Catalog root
Default
Description
Hover over a card to see the bubble with the description. The content of the card bubble can be defined statically or dynamically generated in the `onLoad` event handler.

Inline demo script 1

const kanban = new DayPilot.Kanban("kanban", {
            onCardMove: async args => {
                args.async = true;
                const modal = await DayPilot.Modal.confirm("Move the card to:", args.card.column);
                if (modal.canceled) {
                    args.preventDefault();
                }
                args.loaded();
            },
            onBeforeCardRender: args => {
                args.data.areas = [
                    {
                        right: 5,
                        top: 5,
                        width: 20,
                        height: 20,
                        symbol: "../icons/daypilot.svg#edit",
                        action: "None",
                        onClick: (args) => {
                            const card = args.source;
                            app.editCard(card);
                        }
                    }
                ];
            },
            bubble: new DayPilot.Bubble({
                onLoad: args => {
                    const card = args.source;
                    args.html = `${card.data.text}`;
                }
            })
        });
        kanban.init();

        const app = {
            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.", barColor: "#ea3624"},
                    {id: 2, "name": "Task 2", column: "1", text: "This is a description of task #2.", barColor: "#1155CC"},
                    {id: 3, "name": "Task 3", column: "1", text: "This is a description of task #3.", barColor: "#999"},
                    {id: 4, "name": "Task 4", column: "1", text: "This is a description of task #4.", barColor: "#6AA84F"},
                    {id: 5, "name": "Task 5", column: "2", text: "This is a description of task #5.", barColor: "#F6B26B"},
                ];
                kanban.update({columns, cards});
            },
            editCard(card) {
                const form = [
                    {id: "name", name: "Name", type: "text"},
                    {id: "text", name: "Description", type: "textarea"}
                ];
                DayPilot.Modal.form(form, card.data).then(modal => {
                    if (modal.canceled) {
                        return;
                    }
                    card.data.name = modal.result.name;
                    card.data.text = modal.result.text;
                    kanban.cards.update(card);
                });
            },
            init() {
                this.loadData();
            }
        };
        app.init();