Agent-readable demo data

Title

Asynchronous Validation (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

Event resizing and moving is validated on drop using an asynchronous HTTP call. Read more about event moving validation and event resizing validation.

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

Inline demo script 1

const dp = new DayPilot.Scheduler("dp", {
            startDate: "2026-01-01",
            days: 365,
            scale: "Day",
            timeHeaders: [
                {groupBy: "Month", format: "MMMM yyyy"},
                {groupBy: "Cell", format: "d"}
            ],
            treeEnabled: true,
            resources: [
                {
                    name: "Locations", id: "G1", expanded: true, children: [
                        {name: "Room 1", id: "A"},
                        {name: "Room 2", id: "B"},
                        {name: "Room 3", id: "C"},
                        {name: "Room 4", id: "D"}
                    ]
                },
                {
                    name: "People", id: "G2", expanded: true, children: [
                        {name: "Person 1", id: "E"},
                        {name: "Person 2", id: "F"},
                        {name: "Person 3", id: "G"},
                        {name: "Person 4", id: "H"}
                    ]
                },
                {
                    name: "Tools", id: "G3", expanded: true, children: [
                        {name: "Tool 1", id: "I"},
                        {name: "Tool 2", id: "J"},
                        {name: "Tool 3", id: "K"},
                        {name: "Tool 4", id: "L"}
                    ]
                },
            ],
            onEventMove: async args => {
                args.async = true;
                dp.message("Checking....");
                const {data} = await DayPilot.Http.get("asyncvalidation.txt");

                if (data.error) {
                    dp.message(data.message);
                    args.preventDefault();
                }
                args.loaded();
            },
            onEventMoved: args => {
                dp.message("Moved: " + args.e.text());
            },
            blockOnCallBack: false,
            onEventResize: async args => {
                args.async = true;
                dp.message("Checking....");
                const {data} = await DayPilot.Http.get("asyncvalidation.txt");

                if (data.error) {
                    dp.message(data.message);
                    args.preventDefault();
                }
                args.loaded();
            },
            onEventResized: args => {
                dp.message("Resized: " + args.e.text());
            },
            onTimeRangeSelected: async args => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                dp.clearSelection();
                if (modal.canceled) {
                    return;
                }
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    resource: args.resource,
                    text: modal.result
                });
                dp.message("Created");
            },
            height: 300
        });
        dp.init();
        dp.scrollTo("2026-03-25");

        const app = {
            init() {
                this.loadEventData();
                this.addEventHandlers();
            },
            loadEventData() {
                // generate and load events
                const events = [];

                for (let i = 0; i < 15; i++) {
                    const duration = Math.floor(Math.random() * 6) + 1; // 1 to 6
                    const durationDays = Math.floor(Math.random() * 6 + 2); // 2 to 7
                    const start = Math.floor(Math.random() * 6) + 2; // 2 to 7

                    const resId = String.fromCharCode(65 + i);

                    const event = {
                        start: new DayPilot.Date("2026-03-25T00:00:00").addDays(start),
                        end: new DayPilot.Date("2026-03-25T12:00:00").addDays(start).addDays(durationDays).addHours(duration),
                        id: DayPilot.guid(),
                        resource: resId,
                        text: `Event ${i + 1}`
                    };

                    events.push(event);
                }
                dp.update({events});
            },
            addEventHandlers() {
                document.querySelector("#blockoncallback").addEventListener("change", function() {
                    const checked = this.checked;
                    dp.blockOnCallBack = checked;
                });
            }
        };
        app.init();