Agent-readable demo data

Title

Dark CSS Theme (Open-Source JavaScript Scheduler) | DayPilot Lite for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Lite

Description

A dark CSS theme with rounded events. You can customize the Dark Theme in DayPilot Theme Designer.

• Canonical HTML: /demo/lite/scheduler/themedark.html
• Markdown companion: /demo/lite/scheduler/themedark.md
• Folder: /demo/lite/scheduler/
• Root: /demo/lite/
• Catalog: /demo/lite/llms.txt

Inline demo script 1

const dp = new DayPilot.Scheduler("dp", {
            theme: "scheduler_dark",
            startDate: DayPilot.Date.today().firstDayOfMonth(),
            days: DayPilot.Date.today().daysInMonth(),
            scale: "Day",
            timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
            cellWidth: 60,
            rowHeaderWidth: 170,
            eventHeight: 40,
            rowMarginTop: 6,
            rowMarginBottom: 6,
            heightSpec: "Auto",
            contextMenu: new DayPilot.Menu({
                theme: "dark-menu",
                items: [
                    {text: "Edit name…", onClick: (args) => app.editEvent(args.source)},
                    ...["Blue", "Sage", "Sand", "Lavender"].map((name, tone) => ({
                        text: `Color: ${name}`,
                        onClick: (args) => {
                            args.source.data.tags = {...args.source.data.tags, tone};
                            dp.events.update(args.source);
                        }
                    })),
                    {text: "-"},
                    {
                        text: "Delete",
                        onClick: (args) => {
                            dp.events.remove(args.source);
                        }
                    }
                ]
            }),
            resources: [
                {name: "Alex Morgan", id: "A"},
                {name: "Casey Brooks", id: "B"},
                {name: "Jordan Lee", id: "C"},
                {name: "Taylor Reed", id: "D"},
                {name: "Robin Ellis", id: "E"},
                {name: "Sam Parker", id: "F"}
            ],
            onBeforeEventRender: (args) => {
                args.data.cssClass = `dark-tone-${args.data.tags?.tone || 0}`;
                args.data.html = `<div class="dark-event-label">${DayPilot.Util.escapeHtml(args.data.text)}</div>`;
                args.data.areas = [
                    {
                        right: 4,
                        top: "calc(50% - 10px)",
                        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.contextMenu.show(dp.events.find(args.data.id))
                    }
                ];
            },
            onTimeRangeSelected: async (args) => {
                const modal = await DayPilot.Modal.prompt("New event name:", "New task");
                dp.clearSelection();
                if (modal.canceled) {
                    return;
                }
                dp.events.add({
                    id: DayPilot.guid(),
                    start: args.start,
                    end: args.end,
                    resource: args.resource,
                    text: modal.result
                });
            }
        });
        dp.init();

        const app = {
            init() {
                const start = dp.startDate;
                dp.update({
                    events: [
                        {id: 1, resource: "A", start: start.addDays(1), end: start.addDays(5), text: "Interface design"},
                        {id: 2, resource: "A", start: start.addDays(7), end: start.addDays(11), text: "Design review", tags: {tone: 2}},
                        {id: 3, resource: "B", start: start.addDays(0), end: start.addDays(4), text: "User research", tags: {tone: 1}},
                        {id: 4, resource: "B", start: start.addDays(5), end: start.addDays(9), text: "Prototype"},
                        {
                            id: 5,
                            resource: "C",
                            start: start.addDays(2),
                            end: start.addDays(7),
                            text: "API development",
                            tags: {tone: 1}
                        },
                        {id: 6, resource: "C", start: start.addDays(9), end: start.addDays(14), text: "Integration", tags: {tone: 3}},
                        {id: 7, resource: "D", start: start.addDays(1), end: start.addDays(6), text: "Component library"},
                        {id: 8, resource: "D", start: start.addDays(7), end: start.addDays(12), text: "Accessibility", tags: {tone: 2}},
                        {id: 9, resource: "E", start: start.addDays(0), end: start.addDays(4), text: "Test planning", tags: {tone: 2}},
                        {id: 10, resource: "E", start: start.addDays(6), end: start.addDays(11), text: "Regression tests"},
                        {
                            id: 11,
                            resource: "F",
                            start: start.addDays(3),
                            end: start.addDays(7),
                            text: "Device testing",
                            tags: {tone: 3}
                        },
                        {id: 12, resource: "F", start: start.addDays(9), end: start.addDays(14), text: "Release checks", tags: {tone: 1}}
                    ]
                });
            },
            async editEvent(event) {
                const modal = await DayPilot.Modal.prompt("Event name:", event.text());
                if (modal.canceled) {
                    return;
                }
                event.data.text = modal.result;
                dp.events.update(event);
            }
        };

        app.init();