DayPilot Edition:
Global
PROLocale
Time Axis
PROTime Headers
PRONon-Business Time
PROBusiness Begins
PROBusiness Ends
PROBusiness Weekends
Rows
PRODate Range
PRORow Header Columns
Grid
PROCell Width
PROCrosshair
PROAuto Scroll
Events
PROEvent Height
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
«
»
Timesheet 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
12 AM
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
9 PM
10 PM
11 PM
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
00
15
30
45
Event 1
Loading...
{
locale: "en-us",
onBeforeRowHeaderRender: (args) => {
args.row.horizontalAlignment = "center";
},
cellWidthSpec: "Auto",
cellWidthMin: 20,
crosshairType: "Header",
autoScroll: "Drag",
timeHeaders: [
{
groupBy: "Hour",
},
{
groupBy: "Cell",
format: "mm",
},
],
scale: "CellDuration",
cellDuration: 15,
days: 7,
viewType: "Days",
startDate: DayPilot.Date.today().firstDayOfWeek(),
showNonBusiness: true,
businessBeginsHour: 9,
businessEndsHour: 17,
businessWeekends: false,
floatingEvents: true,
eventHeight: 35,
eventMovingStartEndEnabled: false,
eventResizingStartEndEnabled: false,
timeRangeSelectingStartEndEnabled: false,
groupConcurrentEvents: false,
eventStackingLineHeight: 100,
allowEventOverlap: true,
timeRangeSelectedHandling: "Enabled",
onTimeRangeSelected: async (args) => {
const timesheet = args.control;
const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
timesheet.clearSelection();
if (modal.canceled) { return; }
timesheet.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: "Disabled",
}
[
{
"id": 1,
"start": "2024-11-21T09:00:00",
"end": "2024-11-21T11:00:00",
"text": "Event 1"
},
{
"id": 2,
"start": "2024-11-21T12:00:00",
"end": "2024-11-21T15:00:00",
"text": "Event 2"
}
]
Project name:
Project target: