Multiple events can be selected using Ctrl + click. Read more about
event selecting [doc.daypilot.org].
Agent-readable demo data
- Title
- Event Selecting (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox
- Tree
- DayPilot JavaScript Sandbox
- Catalog root
- Default
- Description
- Multiple events can be selected using Ctrl + click. Read more about event selecting [doc.daypilot.org].
Inline demo script 1
const dp = new DayPilot.Calendar("dp", {
startDate: DayPilot.Date.today(),
viewType: "Week",
eventClickHandling: "Select",
onEventSelected: args => {
dp.message(`Event selected: ${args.e.text()}`);
},
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 = {
init() {
this.loadEventData();
},
loadEventData() {
const events = [
{
start: DayPilot.Date.today().firstDayOfWeek().addDays(1).addHours(11),
end: DayPilot.Date.today().firstDayOfWeek().addDays(1).addHours(14),
id: DayPilot.guid(),
text: "Event 1"
},
{
start: DayPilot.Date.today().firstDayOfWeek().addDays(1).addHours(15),
end: DayPilot.Date.today().firstDayOfWeek().addDays(1).addHours(17),
id: DayPilot.guid(),
text: "Event 2"
},
];
dp.update({events});
}
};
app.init();