Agent-readable demo data

Title

Timesheet (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

The timesheet view displays days on the Y-axis and the 24 hours of a day on the X-axis. Read more about the timesheet [doc.daypilot.org].

• Canonical HTML: /demo/scheduler/timesheet.html
• Markdown companion: /demo/scheduler/timesheet.md
• Folder: /demo/scheduler/
• Root: /demo/
• Catalog: /demo/llms.txt

Inline demo script 1

const dp = new DayPilot.Scheduler("dp", {
            startDate: DayPilot.Date.today().firstDayOfMonth(),
            viewType: "Days",
            days: DayPilot.Date.today().daysInMonth(),
            cellDuration: 15,
            scale: "CellDuration",
            timeHeaders: [
                {groupBy: "Hour"},
                {groupBy: "Cell"}
            ],
            onTimeRangeSelected: async args => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                dp.clearSelection();
                if (modal.canceled) return;
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    resource: args.resource,
                    text: modal.result
                });
                dp.message("Created");
            },
            rowHeaderColumns: [
                {title: "Date"},
                {title: "Day", width: 30}
            ],
            showNonBusiness: true,
            cellWidthSpec: "Auto",
            cellWidthMin: 25,
            businessWeekends: false,
            onBeforeCellRender: args => {
                // disable weekends
                const day = args.cell.start.getDayOfWeek();
                if (day === 6 || day === 0) {
                    args.cell.disabled = true;
                }
            },
            onBeforeRowHeaderRender: args => {
                args.row.horizontalAlignment = "center";

                args.row.columns[1].html = args.row.start.toString("ddd");
                args.row.columns[1].horizontalAlignment = "center";
            },
            height: 350
        });
        dp.init();
        dp.scrollTo(DayPilot.Date.today().firstDayOfMonth().addHours(9));


        const app = {
            init() {
                this.loadEventData();
            },
            loadEventData() {
                // generate and load events
                const events = [];

                for (let i = 0; i < 31; i++) {
                    const start = Math.floor(Math.random() * 6);
                    const duration = Math.floor(Math.random() * 3) + 1; // 1 to 6
                    const from = DayPilot.Date.today().firstDayOfMonth().addHours(9);

                    const event = {
                        start: from.addDays(i).addHours(start),
                        end: from.addDays(i).addHours(start + duration),
                        id: DayPilot.guid(),
                        text: `Event ${i}`,
                        bubbleHtml: `${from.addDays(i).addHours(start)} - ${from.addDays(i).addHours(start + duration)}`
                    };

                    events.push(event);
                }
                dp.update({events});
            }
        };
        app.init();