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

Inline demo script 1

const dp = new DayPilot.Calendar("dp", {
            viewType: "Resources",
            scale: "Day",
            startDate: DayPilot.Date.today().firstDayOfMonth(),
            days: DayPilot.Date.today().daysInMonth(),
            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");
            }
        });

        dp.init();


        const app = {
            init() {
                this.loadEventData();
            },
            loadEventData() {
                const events = [
                    {
                        start: DayPilot.Date.today().firstDayOfMonth().addDays(1),
                        end: DayPilot.Date.today().firstDayOfMonth().addDays(2),
                        id: DayPilot.guid(),
                        resource: "B",
                        text: "Marketing Team",
                        barColor: "#674ea7"
                    },
                    {
                        start: DayPilot.Date.today().firstDayOfMonth().addDays(3),
                        end: DayPilot.Date.today().firstDayOfMonth().addDays(4),
                        id: DayPilot.guid(),
                        resource: "B",
                        text: "Development Team",
                        barColor: "#a64d79"
                    },
                ];
                dp.update({events});
            }
        };
        app.init();