Agent-readable demo data

Title
External Drag and Drop (JavaScript Event Calendar) | DayPilot Pro for JavaScript Demo
Tree
DayPilot JavaScript Demo
Catalog root
Default
Description
External item can be dragged to the event calendar. Read more about external drag and drop [doc.daypilot.org].

Inline demo script 1

const dp = new DayPilot.Calendar("dp", {
            startDate: DayPilot.Date.today(),
            viewType: "Week",
            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");
            },
        });

        dp.init();

        const app = {
            makeDraggable() {
                const parent = document.getElementById("external");
                const items = parent.getElementsByTagName("li");
                for (let i = 0; i < items.length; i++) {
                    const e = items[i];
                    const item = {
                        element: e,
                        externalCursor: "copy",
                        data: {
                            id: e.getAttribute("data-id"),
                            text: e.innerText,
                            duration: e.getAttribute("data-duration"),
                        },
                        onDragStart: args => {
                            console.log("onDragStart", args);
                        },
                        onDrop: args => {
                            console.log("onDrop", args);
                        }
                    };
                    DayPilot.Calendar.makeDraggable(item);
                }
            }
        };

        app.makeDraggable();