Agent-readable demo data
Title
Resources View: Weeks Time Scale (JavaScript Event Calendar) | DayPilot Pro for JavaScript Demo
Tree
DayPilot JavaScript Demo
Catalog root
Default
Description
This demo shows 10 weeks on the vertical axis, one week per cell. Read more about the calendar scale [doc.daypilot.org].

Inline demo script 1

const dp = new DayPilot.Calendar("dp", {
            viewType: "Resources",
            scale: "Week",
            startDate: DayPilot.Date.today().firstDayOfMonth().firstDayOfWeek(1),
            days: 7*10,
            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.html = "Week " + args.header.date.weekNumberISO();
                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().firstDayOfMonth().firstDayOfWeek(1),
                        end: DayPilot.Date.today().firstDayOfMonth().firstDayOfWeek(1).addDays(7),
                        id: DayPilot.guid(),
                        resource: "B",
                        text: "Marketing Team",
                        barColor: "#674ea7"
                    },
                    {
                        start: DayPilot.Date.today().firstDayOfMonth().firstDayOfWeek(1).addDays(14),
                        end: DayPilot.Date.today().firstDayOfMonth().firstDayOfWeek(1).addDays(21),
                        id: DayPilot.guid(),
                        resource: "B",
                        text: "Development Team",
                        barColor: "#a64d79"
                    },
                ];
                dp.update({events});
            }
        };
        app.init();