Agent-readable demo data

Title
Dark CSS Theme (JavaScript Kanban) | DayPilot Pro for JavaScript Demo
Tree
DayPilot JavaScript Demo
Catalog root
Default
Description
A dark CSS theme with rounded cards. You can customize the Dark Theme in DayPilot Theme Designer.

Inline demo script 1

const dp = new DayPilot.Kanban("dp", {
            theme: "kanban_dark",
            columnWidthSpec: "Auto",
            cardHeight: 92,
            cardMarginLeft: 12,
            cardMarginRight: 12,
            cardMarginBottom: 12,
            heightSpec: "Auto",
            rowMinHeight: 390,
            contextMenuCard: new DayPilot.Menu({
                theme: "dark-menu",
                items: [
                    {text: "Edit name…", onClick: (args) => app.editCard(args.source)},
                    ...["Blue", "Sage", "Sand", "Lavender"].map((name, tone) => ({
                        text: `Color: ${name}`,
                        onClick: (args) => {
                            args.source.data.tags = {...args.source.data.tags, tone};
                            args.source.data.cssClass = `dark-tone-${tone}`;
                            dp.cards.update(args.source);
                        }
                    })),
                    {text: "-"},
                    {text: "Delete", onClick: (args) => dp.cards.remove(args.source)}
                ]
            }),
            cardDoubleClickHandling: "Enabled",
            onCardDoubleClick: (args) => app.editCard(args.card),
            onBeforeCardRender: (args) => {
                args.data.html = `<div class="dark-card-title">${DayPilot.Util.escapeHtml(args.data.name)}</div><div class="dark-card-detail">${DayPilot.Util.escapeHtml(args.data.text)}</div>`;
                args.data.barColor = ["#8fc6e8", "#9aceb7", "#dec28c", "#bfb4e4"][args.data.tags?.tone || 0];
                args.data.areas = [
                    {
                        right: 4,
                        top: 5,
                        width: 18,
                        height: 20,
                        padding: 1,
                        symbol: "../icons/daypilot.svg#threedots-v",
                        fontColor: "#f0f5f8",
                        cssClass: "dark-action",
                        toolTip: "Edit, recolor or delete",
                        action: "None",
                        onClick: () => dp.contextMenuCard.show(dp.cards.find(args.data.id))
                    }
                ];
            },
            onBeforeColumnHeaderRender: (args) => {
                args.header.areas = [
                    {
                        right: 10,
                        top: 9,
                        width: 18,
                        height: 18,
                        symbol: "../icons/daypilot.svg#plus-4",
                        fontColor: "#eeeef0",
                        cssClass: "dark-action",
                        toolTip: "Add a card",
                        action: "None",
                        onClick: (a) => app.addCard(a.source.data.id)
                    }
                ];
            },
            columns: [
                {id: "todo", name: "To do"},
                {id: "doing", name: "In progress"},
                {id: "review", name: "Review"},
                {id: "done", name: "Done"}
            ]
        });
        dp.init();

        const app = {
            init() {
                this.loadData();
            },
            loadData() {
                const cards = [
                    {
                        id: 1,
                        name: "Research",
                        text: "User interviews",
                        column: "todo",
                        tags: {tone: 0},
                        cssClass: "dark-tone-0"
                    },
                    {id: 2, name: "Copy", text: "Website content", column: "todo", tags: {tone: 3}, cssClass: "dark-tone-3"},
                    {
                        id: 3,
                        name: "Design",
                        text: "Component library",
                        column: "doing",
                        tags: {tone: 1},
                        cssClass: "dark-tone-1"
                    },
                    {
                        id: 4,
                        name: "Integration",
                        text: "Connect the API",
                        column: "doing",
                        tags: {tone: 0},
                        cssClass: "dark-tone-0"
                    },
                    {
                        id: 5,
                        name: "Accessibility",
                        text: "Keyboard and screen reader checks",
                        column: "review",
                        tags: {tone: 2},
                        cssClass: "dark-tone-2"
                    },
                    {id: 6, name: "Planning", text: "Sprint scope", column: "done", tags: {tone: 0}, cssClass: "dark-tone-0"},
                    {
                        id: 7,
                        name: "Prototype",
                        text: "Navigation and page layouts",
                        column: "done",
                        tags: {tone: 1},
                        cssClass: "dark-tone-1"
                    }
                ];
                dp.update({cards});
            },
            async addCard(column) {
                const modal = await DayPilot.Modal.prompt("New card:", "New task");
                if (modal.canceled) {
                    return;
                }
                dp.cards.add({
                    id: DayPilot.guid(),
                    name: modal.result,
                    text: "Ready to plan",
                    column,
                    tags: {tone: 0},
                    cssClass: "dark-tone-0"
                });
            },
            async editCard(card) {
                const modal = await DayPilot.Modal.prompt("Card name:", card.data.name);
                if (modal.canceled) {
                    return;
                }
                card.data.name = modal.result;
                dp.cards.update(card);
            }
        };

        app.init();