DayPilot Edition:
Global
PROLocale
Time Axis
PRORange
PROTime Headers
PRONon-Business Time
PROBusiness Begins
PROBusiness Ends
PROBusiness Weekends
Rows
PROTree
PRORow Header Width
PRORow Header Hiding
PROMinimum Row Height
Grid
PROCell Width
PROCrosshair
PROAuto Scroll
Events
PROEvent Height
PRODuration Bar
PROFloating Labels
PROMoving Location Labels
PROResizing Location Labels
PROCreating Location Labels
Event Overlaps
PROAllow during Drag & Drop
PROGroup Overlapping Events
PROEvent Stacking Line Height
Event Actions
PROEvent Creating
PROEvent Moving
PROEvent Resizing
PROEvent Deleting
PROEvent Click Action
PROEvent Hover Action
PROEvent Context Menu
«
»
Scheduler UI Builder
- Preview
- Config
- Resources
- Events
- Download
DEMO
Group 1
Resource 1
Resource 2
Group 2
Resource 3
Resource 4
November 2024
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Event 1
Event 2
Loading...
{
timeHeaders: [
{
groupBy: "Month",
},
{
groupBy: "Day",
format: "d",
},
],
scale: "Day",
days: DayPilot.Date.today().daysInMonth(),
startDate: DayPilot.Date.today().firstDayOfMonth(),
timeRangeSelectedHandling: "Enabled",
onTimeRangeSelected: async (args) => {
const scheduler = args.control;
const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
scheduler.clearSelection();
if (modal.canceled) { return; }
scheduler.events.add({
start: args.start,
end: args.end,
id: DayPilot.guid(),
resource: args.resource,
text: modal.result
});
},
eventMoveHandling: "Update",
onEventMoved: (args) => {
args.control.message("Event moved: " + args.e.text());
},
eventResizeHandling: "Update",
onEventResized: (args) => {
args.control.message("Event resized: " + args.e.text());
},
eventDeleteHandling: "Update",
onEventDeleted: (args) => {
args.control.message("Event deleted: " + args.e.text());
},
eventClickHandling: "Disabled",
eventHoverHandling: "Bubble",
bubble: new DayPilot.Bubble({
onLoad: (args) => {
// if the event object doesn't specify "bubbleHtml" property
// this onLoad handler will be called to provide the bubble HTML
args.html = "Event details";
}
}),
treeEnabled: true,
}
[
{
"name": "Group 1",
"id": "G1",
"expanded": true,
"children": [
{
"name": "Resource 1",
"id": "R1"
},
{
"name": "Resource 2",
"id": "R2"
}
]
},
{
"name": "Group 2",
"id": "G2",
"expanded": true,
"children": [
{
"name": "Resource 3",
"id": "R3"
},
{
"name": "Resource 4",
"id": "R4"
}
]
}
]
[
{
"id": 1,
"resource": "R1",
"start": "2024-11-04T00:00:00",
"end": "2024-11-08T00:00:00",
"text": "Event 1"
},
{
"id": 2,
"resource": "R1",
"start": "2024-11-12T00:00:00",
"end": "2024-11-16T00:00:00",
"text": "Event 2"
}
]
Project name:
Project target: