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.
Agent-readable demo data
- Title
- Event Copying (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo
- Tree
- DayPilot JavaScript Demo
- Catalog root
- Default
- Description
- 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.
Inline demo script 1
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();