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
11/17/2024
11/18/2024
11/19/2024
11/20/2024
11/21/2024
11/22/2024
11/23/2024
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": "2024-11-21T10:00:00",
"end": "2024-11-21T12:00:00",
"text": "Event 1"
},
{
"id": 2,
"start": "2024-11-21T11:00:00",
"end": "2024-11-21T14:00:00",
"text": "Event 2"
},
{
"id": 3,
"start": "2024-11-21T00:00:00",
"end": "2024-11-22T00:00:00",
"text": "Event 3",
"allday": true
}
]
Project name:
Project target: