Title

Resources View: Hours Time Scale (JavaScript Event Calendar) | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

This demo shows the current week on the vertical axis, one hour per cell. Read more about the calendar scale [doc.daypilot.org].

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

Inline demo script 1

const dp = new DayPilot.Calendar("dp", {
            viewType: "Resources",
            scale: "Hour",
            startDate: DayPilot.Date.today().firstDayOfWeek("en-us"),
            days: 7,
            headerHeight: 50,
            heightSpec: "Fixed",
            height: 500,
            cellHeight: 60,
            columns: [
                { name: "Meeting Room A", id: "A" },
                { name: "Meeting Room B", id: "B" },
                { name: "Meeting Room C", id: "C" },
                { name: "Meeting Room D", id: "D" },
                { name: "Meeting Room E", id: "E" },
                { name: "Meeting Room F", id: "F" },
            ],
            onTimeRangeSelected: async args => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                if (modal.canceled) return;
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    resource: args.resource,
                    text: modal.result
                });
                dp.clearSelection();
                dp.message("Created");
            },
            onBeforeTimeHeaderRender: args => {
                args.header.areas = [
                    {
                        left: 0,
                        right: 0,
                        bottom: 0,
                        text: args.header.date.toString("MMM d"),
                        horizontalAlignment: "center",
                        fontColor: "#ccc"
                    }
                ];
            }
        });

        dp.init();


        const app = {
            init() {
                this.loadEventData();
            },
            loadEventData() {
                const events = [
                    {
                        start: DayPilot.Date.today().firstDayOfWeek().addHours(9),
                        end: DayPilot.Date.today().firstDayOfWeek().addHours(11),
                        id: DayPilot.guid(),
                        resource: "B",
                        text: "Marketing Team",
                        barColor: "#674ea7"
                    },
                    {
                        start: DayPilot.Date.today().firstDayOfWeek().addHours(14),
                        end: DayPilot.Date.today().firstDayOfWeek().addHours(16),
                        id: DayPilot.guid(),
                        resource: "B",
                        text: "Development Team",
                        barColor: "#a64d79"
                    },
                ];
                dp.update({events});
            }
        };
        app.init();