Agent-readable demo data

Title
Dark CSS Theme (Monthly 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.Month("dp", {
            theme: "month_dark",
            startDate: "2026-10-01",
            weekStarts: 1,
            eventHeight: 32,
            cellHeight: 120,
            cellHeaderHeight: 28,
            cellMarginBottom: 12,
            headerHeight: 32,
            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: "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))
                    }
                ];
            }
        });
        dp.init();

        const nav = new DayPilot.Navigator("nav", {
            theme: "navigator_dark",
            startDate: "2026-10-01",
            showMonths: 1,
            skipMonths: 1,
            selectMode: "Month",
            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).firstDayOfMonth();
                dp.update({
                    events: [
                        {id: 1, start: start.addDays(1), end: start.addDays(4), text: "Discovery"},
                        {id: 2, start: start.addDays(4), end: start.addDays(7), text: "User interviews", tags: {tone: 1}},
                        {id: 3, start: start.addDays(5), end: start.addDays(9), text: "Prototype", tags: {tone: 3}},
                        {id: 4, start: start.addDays(8), end: start.addDays(10), text: "Design review", tags: {tone: 2}},
                        {id: 5, start: start.addDays(11), end: start.addDays(15), text: "Component library"},
                        {id: 6, start: start.addDays(12), end: start.addDays(16), text: "API development", tags: {tone: 1}},
                        {id: 7, start: start.addDays(14), end: start.addDays(17), text: "Integration", tags: {tone: 3}},
                        {id: 8, start: start.addDays(18), end: start.addDays(21), text: "Accessibility", tags: {tone: 2}},
                        {id: 9, start: start.addDays(19), end: start.addDays(23), text: "Regression tests"},
                        {id: 10, start: start.addDays(22), end: start.addDays(24), text: "Release review", tags: {tone: 2}},
                        {id: 11, start: start.addDays(25), end: start.addDays(28), text: "Documentation", tags: {tone: 1}},
                        {id: 12, start: start.addDays(28), end: start.addDays(30), text: "Launch", tags: {tone: 3}}
                    ]
                });
                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();