# Event Copying (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo

> You can copy events by holding Ctrl while dragging and dropping, or by using the icon on the right side of the event. Read more about [copying events](https://doc.daypilot.org/scheduler/event-copying/).

## Links

- Canonical HTML: /demo/scheduler/eventcopying.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", {
            eventHeight: 40,
            startDate: "2026-01-01",
            days: 365,
            scale: "Day",
            timeHeaders: [
                {groupBy: "Month", format: "MMM yyyy"},
                {groupBy: "Cell", format: "d"}
            ],
            treeEnabled: true,
            treePreventParentUsage: true,
            onTimeRangeSelected: async (args) => {

                const form = [
                    {name: "Name", id: "name"}
                ];

                const modal = await DayPilot.Modal.form(form);
                dp.clearSelection();
                if (modal.canceled) {
                    return;
                }
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    resource: args.resource,
                    text: modal.result.name
                });
                dp.message("Created");
            },
            contextMenu: new DayPilot.Menu({
                items: [
                    {
                        text: "Copy", onClick: (args) => {
                            app.ref.copied = args.source;
                        }
                    },
                    {
                        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);
                        }
                    },
                ]
            }),
            contextMenuSelection: new DayPilot.Menu({
                items: [
                    {
                        text: "Paste", onClick: args => {
                            const copied = app.ref.copied;
                            if (!copied) {
                                DayPilot.Modal.alert('You need to copy an event first.');
                                return;
                            }
                            const selection = args.source;
                            const duration = copied.end().getTime() - copied.start().getTime(); // milliseconds
                            const newEvent = {
                                start: selection.start,
                                end: selection.start.addMilliseconds(duration),
                                text: "Copy of " + copied.text(),
                                resource: selection.resource,
                                id: DayPilot.guid()  // generate random id
                            };
                            dp.events.add(newEvent);
                            dp.clearSelection();

                            // send the action to the server using an HTTP call here

                        }
                    }
                ]
            }),
            onEventMove: (args) => {
                if (args.ctrl) {
                    const newEvent = {
                        start: args.newStart,
                        end: args.newEnd,
                        text: "Copy of " + args.e.text(),
                        resource: args.newResource,
                        id: DayPilot.guid()  // generate random id
                    };
                    dp.events.add(newEvent);

                    // notify the server about the action here

                    args.preventDefault(); // prevent the default action - moving event to the new location
                }
                if (args.areaData === "event-copy") {
                    dp.events.add({
                        start: args.newStart,
                        end: args.newEnd,
                        resource: args.newResource,
                        id: DayPilot.guid(),
                        text: "Copy of " + args.e.text()
                    });
                    args.preventDefault();
                }
            },
            onBeforeEventRender: (args) => {
                args.data.areas = [
                    {
                        right: 2,
                        top: "calc(50% - 9px)",
                        width: 18,
                        height: 18,
                        backColor: "#fff",
                        style: "box-sizing: border-box; border-radius: 18px; padding-left: 4px; border: 1px solid #ccc;font-size: 14px;line-height: 14px;color: #999;",
                        html: "»",
                        toolTip: "Copy",
                        action: "Move",
                        data: "event-copy"

                    }
                ];
            },
            onEventMoving: (args) => {
                if (args.areaData && args.areaData === "event-copy") {
                    args.html = "Copying";
                }
            },
            height: 350
        });
        dp.init();
        dp.scrollTo("2026-03-25");


        const app = {
            ref: {
                copied: null
            },
            loadData() {
                const 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: false, children: [
                            {name: "Tool 1", id: "I"},
                            {name: "Tool 2", id: "J"},
                            {name: "Tool 3", id: "K"},
                            {name: "Tool 4", id: "L"}
                        ]
                    },

                ];

                const events = [];
                for (let i = 0; i < 12; i++) {
                    const duration = Math.floor(Math.random() * 6) + 1; // 1 to 6
                    const durationDays = Math.floor(Math.random() * 4) + 2; // 2 to 5
                    const start = Math.floor(Math.random() * 6) + 2; // 2 to 7

                    const e = {
                        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: String.fromCharCode(65 + i),
                        text: "Event " + (i + 1)
                    };

                    events.push(e);
                }

                dp.update({
                    resources: resources,
                    events: events
                });
            },
            init() {
                app.loadData();
            }
        };

        app.init();
```