DayPilot
Products
Support
DayPilot UI Builder
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: