# JavaScript Scheduler | DayPilot Pro for JavaScript Demo

> Read more about [progressive event rendering](https://doc.daypilot.org/scheduler/progressive-event-rendering/).

## Links

- Canonical HTML: /demo/scheduler/eventsprogressive.html
- Source HTML folder: /demo/scheduler/
- Catalog root: /demo/
- Catalog: /demo/llms.txt

## Source

### Inline demo script 1

```javascript
const dp = new DayPilot.Scheduler("dp", {
            startDate: "2026-04-01",
            days: 365,
            scale: "Day",
            timeHeaders: [
                {groupBy: "Month", format: "MMMM yyyy"},
                {groupBy: "Day", format: "d"}
            ],
            treeEnabled: true,
            rowMarginTop: 2,
            rowMarginBottom: 2,
            treePreventParentUsage: true,
            heightSpec: "Max",
            height: 400,
            eventMovingStartEndEnabled: true,
            eventResizingStartEndEnabled: true,
            timeRangeSelectingStartEndEnabled: true,
            rowHeaderColumns: [
                {name: "Resource", display: "name"},
                {name: "ID", display: "id"}
            ],
            contextMenu: new DayPilot.Menu({
                items: [
                    {
                        text: "Edit",
                        onClick: (args) => {
                            dp.events.edit(args.source);
                        }
                    },
                    {
                        text: "Delete",
                        onClick: (args) => {
                            dp.events.remove(args.source);
                        }
                    },
                    {text: "-"},
                    {
                        text: "Select",
                        onClick: (args) => {
                            dp.multiselect.add(args.source);
                        }
                    },
                ]
            }),
            bubble: new DayPilot.Bubble({
                onLoad: (args) => {
                    const e = args.source;
                    const text = DayPilot.Util.escapeHtml(e.text());
                    const start = e.start().toString("M/d/yyyy h:mm tt");
                    const end = e.end().toString("M/d/yyyy h:mm tt");
                    args.html = `<div><b>${text}</b></div><div>Start: ${start}</div><div>End: ${end}</div>`;
                },
            }),
            onEventMoved: (args) => {
                const text = args.e.text();
                dp.message(`The event has been moved (${text})`);
            },
            onEventMoving: (args) => {
                // see more examples at https://doc.daypilot.org/scheduler/event-moving-customization/
                if (args.e.resource() === "A" && args.resource === "B") {  // don't allow moving from A to B
                    args.left.enabled = false;
                    args.right.html = "You can't move an event from Room 1 to Room 2";

                    args.allowed = false;
                }
                else if (args.resource === "B") {  // must start on a working day, maximum length one day
                    while (args.start.getDayOfWeek() === 0 || args.start.getDayOfWeek() === 6) {
                        args.start = args.start.addDays(1);
                    }
                    args.end = args.start.addDays(1);  // fixed duration
                    args.left.enabled = false;
                    args.right.html = "Events in Room 2 must start on a workday and are limited to 1 day.";
                }
            },
            onEventResized: (args) => {
                dp.message("Resized: " + args.e.text());
            },
            onTimeRangeSelected: async (args) => {
                const modal = await DayPilot.Modal.prompt("New event name:", "New Event")
                dp.clearSelection();
                if (modal.canceled) {
                    return;
                }
                const name = modal.result;
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    resource: args.resource,
                    text: name
                });
                dp.message("Created");
            },
            onEventMove: (args) => {
                if (args.ctrl) {
                    dp.events.add({
                        start: args.newStart,
                        end: args.newEnd,
                        text: "Copy of " + args.e.text(),
                        resource: args.newResource,
                        id: DayPilot.guid()  // generate random id
                    });

                    // notify the server about the action here
                    args.preventDefault(); // prevent the default action - moving event to the new location
                }
            },
            onEventClick: (args) => {
                DayPilot.Modal.alert(args.e.data.text);
            },
            onBeforeEventRender: args => {
                args.data.areas = [
                    {
                        right: 2,
                        top: "calc(50% - 9px)",
                        width: 18,
                        height: 18,
                        style: "cursor:pointer;",
                        backColor: "#cccccc88",
                        borderRadius: "50%",
                        padding: 2,
                        fontColor: "#333333",
                        symbol: "../icons/daypilot.svg#threedots-h",
                        action: "ContextMenu",
                        toolTip: "Menu"
                    }
                ];
            },
            separators: [
              {location: new DayPilot.Date("2026-09-01"), color: "red", toolTip: "Test"},
            ],
            scrollDelayEvents: "Auto",
            dynamicEventRenderingCacheSweeping: true,
            dynamicEventRenderingCacheSize: 300,
            dynamicEventRenderingMarginX: 200,
            dynamicEventRenderingMarginY: 200
        });

        dp.init();
        dp.scrollTo("2026-04-01");

        const app = {
            barColor(i) {
                const colors = ["#3c78d8", "#6aa84f", "#f1c232", "#cc0000"];
                return colors[i % 4];
            },
            barBackColor(i) {
                const colors = ["#a4c2f4", "#b6d7a8", "#ffe599", "#ea9999"];
                return colors[i % 4];
            },
            loadData() {
                const resources = [];

                for (let y = 0; y < 200; y++) {
                    resources.push({name: "Resource " + y, id: y});
                }

                const events = [];
                for (let y = 0; y < 200; y++) {
                    for (let x = 0; x < 20; x++) {
                        const i = y*20 + x + 1;
                        const e = {
                            start: new DayPilot.Date("2026-04-05T12:00:00").addDays(x),
                            end: new DayPilot.Date("2026-04-05T12:00:00").addDays(x + 1),
                            id: i,
                            resource: y,
                            text: "Event " + (i),
                            bubbleHtml: "Event " + (i),
                            barColor: app.barColor(i),
                            barBackColor: app.barBackColor(i)
                        };

                        events.push(e);

                    }

                }

                dp.update({resources, events});
            },
            addEventHandlers() {
                document.querySelector("#scrollDelayEvents").addEventListener("change", (ev) => {
                    const value = ev.target.value.trim();
                    dp.scrollDelayEvents = value.toLowerCase() === "auto" ? "Auto" : Number(value);
                });

                document.querySelector("#dynamicEventRenderingCacheSweeping").addEventListener("change", (ev) => {
                    dp.dynamicEventRenderingCacheSweeping = ev.target.checked;
                });

                document.querySelector("#dynamicEventRenderingCacheSize").addEventListener("change", (ev) => {
                    dp.dynamicEventRenderingCacheSize = Number(ev.target.value);
                });

                document.querySelector("#dynamicEventRenderingMargin").addEventListener("change", (ev) => {
                    const value = Number(ev.target.value);
                    dp.dynamicEventRenderingMarginX = value;
                    dp.dynamicEventRenderingMarginY = value;
                });

            },
            init() {
                app.addEventHandlers();
                app.loadData();
            }
        };

        app.init();
```