DayPilot Edition:
Global
Locale
Columns
PROColumn Width
PROTree
Header Height
Grid
PROCell Duration
Cell Height
PROCrosshair
Business Begins
Business Ends
PROCurrent Time
Time Axis
PRODay Begins
PRODay Ends
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
«
»
Resource Calendar UI Builder
- Preview
- Config
- Resources
- Events
- Download
|
|
|
Loading...
{
viewType: "Resources",
locale: "en-us",
headerHeight: 30,
cellHeight: 30,
businessBeginsHour: 9,
businessEndsHour: 17,
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,
resource: args.resource
});
},
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",
}
[
{
"name": "Resource 1",
"id": "R1"
},
{
"name": "Resource 2",
"id": "R2"
},
{
"name": "Resource 3",
"id": "R3"
},
{
"name": "Resource 4",
"id": "R4"
}
]
[
{
"id": "1",
"start": "2025-04-08T10:00:00",
"end": "2025-04-08T12:00:00",
"text": "Event 1",
"resource": "R1"
},
{
"id": "2",
"start": "2025-04-08T11:00:00",
"end": "2025-04-08T14:00:00",
"text": "Event 2",
"resource": "R1"
}
]
Project name:
Project target: