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
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
23
2
9
16
23
30
24
3
10
17
24
31
25
4
11
18
25
April 1
26
5
12
19
26
2
27
6
13
20
27
3
28
7
14
21
28
4
March 1
8
15
22
29
5
Event 1
Event 2
Loading...
DEMO
{
locale: "en-us",
viewType: "Month",
showWeekend: true,
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",
eventHoverHandling: "Disabled",
}
[
{
"id": "1",
"start": "2025-03-29T00:00:00",
"end": "2025-03-30T00:00:00",
"text": "Event 1"
},
{
"id": "2",
"start": "2025-03-31T00:00:00",
"end": "2025-04-02T00:00:00",
"text": "Event 2"
}
]
Project name:
Project target: