# External Drag and Drop (JavaScript Event Calendar) | DayPilot Pro for JavaScript Demo

> External item can be dragged to the event calendar. Read more about [external drag and drop](https://doc.daypilot.org/calendar/external-drag-and-drop/) [doc.daypilot.org].

## Links

- Canonical HTML: /demo/calendar/external.html
- Source HTML folder: /demo/calendar/
- Catalog root: /demo/
- Catalog: /demo/llms.txt

## Source

### Inline demo script 1

```javascript
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();
```