Agent-readable demo data

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

Inline demo script 1

const dp = new DayPilot.Calendar("dp", {
            theme: "calendar_dark",
            startDate: "2026-10-12",
            viewType: "Week",
            weekStarts: 1,
            businessBeginsHour: 8,
            businessEndsHour: 18,
            cellHeight: 30,
            showAllDayEvents: true,
            allDayEventHeight: 34,
            eventDoubleClickHandling: "Enabled",
            onEventMoved: () => app.syncNavigator(),
            onEventResized: () => app.syncNavigator(),
            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);
                            app.syncNavigator();
                        }
                    }
                ]
            }),
            onTimeRangeSelected: async (args) => {
                const modal = await DayPilot.Modal.prompt("New event name:", "New event");
                dp.clearSelection();
                if (modal.canceled) {
                    return;
                }
                dp.events.add({id: DayPilot.guid(), start: args.start, end: args.end, text: modal.result});
                app.syncNavigator();
            },
            onEventDoubleClick: (args) => app.editEvent(args.e),
            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: 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.contextMenu.show(dp.events.find(args.data.id))
                    }
                ];
            }
        });
        dp.init();

        const nav = new DayPilot.Navigator("nav", {
            theme: "navigator_dark",
            startDate: "2026-10-01",
            showMonths: 1,
            skipMonths: 1,
            selectMode: "Week",
            weekStarts: 1,
            selectionDay: "2026-10-12",
            cellWidth: "Auto",
            onTimeRangeSelected: (args) => {
                dp.update({startDate: args.start});
                app.loadData(args.start);
            }
        });
        nav.init();

        const app = {
            loadData(startDate) {
                const start = new DayPilot.Date(startDate).firstDayOfWeek(1);
                dp.update({
                    events: [
                        {id: 1, start: start.addHours(9), end: start.addHours(11), text: "Sprint planning"},
                        {id: 2, start: start.addHours(13), end: start.addHours(15), text: "User research", tags: {tone: 1}},
                        {
                            id: 3,
                            start: start.addDays(1).addHours(10),
                            end: start.addDays(1).addHours(12),
                            text: "Interface design",
                            tags: {tone: 3}
                        },
                        {
                            id: 4,
                            start: start.addDays(1).addHours(14),
                            end: start.addDays(1).addHours(16),
                            text: "Design review",
                            tags: {tone: 2}
                        },
                        {
                            id: 5,
                            start: start.addDays(2).addHours(9),
                            end: start.addDays(2).addHours(12),
                            text: "Component library"
                        },
                        {
                            id: 6,
                            start: start.addDays(2).addHours(11),
                            end: start.addDays(2).addHours(13),
                            text: "API integration",
                            tags: {tone: 1}
                        },
                        {
                            id: 7,
                            start: start.addDays(3).addHours(10),
                            end: start.addDays(3).addHours(12),
                            text: "Accessibility review",
                            tags: {tone: 2}
                        },
                        {
                            id: 8,
                            start: start.addDays(3).addHours(14),
                            end: start.addDays(3).addHours(16),
                            text: "Usability testing",
                            tags: {tone: 3}
                        },
                        {
                            id: 9,
                            start: start.addDays(4).addHours(9),
                            end: start.addDays(4).addHours(11),
                            text: "Release checks"
                        },
                        {
                            id: 10,
                            start: start.addDays(4).addHours(14),
                            end: start.addDays(4).addHours(16),
                            text: "Team retrospective",
                            tags: {tone: 2}
                        },
                        {id: 11, start: start.addDays(1), end: start.addDays(3), text: "Design workshop", allday: true}
                    ]
                });
                app.syncNavigator();
            },
            init() {
                this.loadData(dp.startDate);
            },
            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);
            },
            syncNavigator() {
                nav.update({events: dp.events.list});
            }
        };

        app.init();