DayPilot
Products
Support
DayPilot UI Builder
DayPilot Edition:
Global
Locale
Columns
Date Range
Date Format
PROColumn Width
Grid
PROCell Duration
Cell Height
PROCrosshair
Business Begins
Business Ends
Time Axis
PRODay Begins
PRODay Ends
All-Day Events
PROAll-Day Events
Event Overlaps
PROArrangement Mode
PROAllow during Drag & Drop
Events
Event Creating
Event Moving
Event Resizing
Event Deleting
Event Click Action
PROEvent Hover Action
Event Context Menu
«
»
Weekly Calendar UI Builder
  • Preview
  • Config
  • Events
  • Download
DEMO
6/1/2025
6/2/2025
6/3/2025
6/4/2025
6/5/2025
6/6/2025
6/7/2025
12AM
1AM
2AM
3AM
4AM
5AM
6AM
7AM
8AM
9AM
10AM
11AM
12PM
1PM
2PM
3PM
4PM
5PM
6PM
7PM
8PM
9PM
10PM
11PM
Event 1
Event 2
Loading...
{
  viewType: "Week",
  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
    });
  },
  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-06-05T10:00:00",
    "end": "2025-06-05T12:00:00",
    "text": "Event 1"
  },
  {
    "id": 2,
    "start": "2025-06-05T11:00:00",
    "end": "2025-06-05T14:00:00",
    "text": "Event 2"
  },
  {
    "id": 3,
    "start": "2025-06-05T00:00:00",
    "end": "2025-06-06T00:00:00",
    "text": "Event 3",
    "allday": true
  }
]
Project name:
Project target: