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

> Read more about the [JavaScript monthly calendar](http://javascript.daypilot.org/month/).

## Links

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

## Source

### Inline demo script 1

```javascript
var dp = new DayPilot.Month("dp");

        // behavior and appearance
        dp.cellMarginBottom = 20;

        dp.bubble = new DayPilot.Bubble({
            onLoad: function (args) {
                var ev = args.source;
                args.html = "testing bubble for: " + ev.text();
            }
        });

        // view
        dp.startDate = "2026-11-01";

        // generate and load events
        for (var i = 0; i < 10; i++) {
            var duration = Math.floor(Math.random() * 1.2);
            var start = Math.floor(Math.random() * 6) - 3; // -3 to 3

            var e = new DayPilot.Event({
                start: new DayPilot.Date("2026-11-04T00:00:00").addDays(start),
                end: new DayPilot.Date("2026-11-04T12:00:00").addDays(start).addDays(duration),
                id: DayPilot.guid(),
                text: "Event " + i,
                tags: {
                    url: "myurl"
                }
            });
            dp.events.add(e);
        }

        // event moving
        dp.onEventMoved = function (args) {
            dp.message("Moved: " + args.e.text());
        };

        // event resizing
        dp.onEventResized = function (args) {
            dp.message("Resized: " + args.e.text());
        };

        dp.onBeforeHeaderRender = function (args) {

        };

        dp.onBeforeEventRender = function (args) {
            //args.data.fontColor = "red";
        };

        // event creating
        dp.onTimeRangeSelected = function (args) {
            var name = prompt("New event name:", "Event");
            dp.clearSelection();
            if (!name) return;
            var e = new DayPilot.Event({
                start: args.start,
                end: args.end,
                id: DayPilot.guid(),
                text: name
            });
            dp.events.add(e);
            dp.message("Created");
        };

        dp.onEventClicked = function (args) {

        };

        dp.onHeaderClicked = function (args) {

        };

        dp.init();

        function makeDraggable() {
            const parent = document.getElementById("external");
            const items = parent.getElementsByTagName("li");
            for (let i = 0; i < items.length; i++) {
                const e = items[i];
                var item = {
                    element: e,
                    onDragStart: function () {
                        console.log("Drag started");
                    },
                    onDrop: function () {
                        console.log("Dropped");
                    },
                    data: {
                        id: e.getAttribute("data-id"),
                        text: e.innerText,
                        duration: DayPilot.Duration.days(e.getAttribute("data-duration")),
                    },
                };
                DayPilot.Month.makeDraggable(item);
            }
        }

        makeDraggable();
```