DayPilot Edition:
Global
Locale
Date
PRODate Range
PROShow Weekends
Events
Event Creating
Event Moving
Event Resizing
Event Deleting
Event Click Action
PROEvent Hover Action
Event Context Menu
«
»
Monthly Calendar UI Builder
- Preview
- Config
- Events
- Download
Sunday
June 1
8
15
22
29
Monday
2
9
16
23
30
Tuesday
3
10
17
24
July 1
Wednesday
4
11
18
25
2
Thursday
5
12
19
26
3
Friday
6
13
20
27
4
Saturday
7
14
21
28
5
Event 1
Event 2
{
locale: "en-us",
timeRangeSelectedHandling: "Enabled",
onTimeRangeSelected: async (args) => {
const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
const calendar = args.control;
calendar.clearSelection();
if (modal.canceled) { return; }
calendar.events.add({
start: args.start,
end: args.end,
id: DayPilot.guid(),
text: modal.result
});
},
eventDeleteHandling: "Disabled",
eventMoveHandling: "Update",
onEventMoved: (args) => {
console.log("Event moved: " + args.e.text());
},
eventResizeHandling: "Update",
onEventResized: (args) => {
console.log("Event resized: " + args.e.text());
},
eventClickHandling: "Disabled",
eventRightClickHandling: "Disabled",
}
[
{
"id": "1",
"start": "2025-06-08T00:00:00",
"end": "2025-06-09T00:00:00",
"text": "Event 1"
},
{
"id": "2",
"start": "2025-06-10T00:00:00",
"end": "2025-06-12T00:00:00",
"text": "Event 2"
}
]
Project name:
Project target: