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
27
3
10
17
24
28
4
11
18
25
29
5
12
19
26
30
6
13
20
27
31
7
14
21
28
November 1
8
15
22
29
2
9
16
23
30
Event 1
Event 2
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": "2024-11-21T00:00:00",
"end": "2024-11-22T00:00:00",
"text": "Event 1"
},
{
"id": "2",
"start": "2024-11-23T00:00:00",
"end": "2024-11-25T00:00:00",
"text": "Event 2"
}
]
Project name:
Project target: