Agent-readable demo data
Title
Resources View: Custom 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 half-day per cell. Read more about the calendar scale [doc.daypilot.org].

Inline demo script 1

const dp = new DayPilot.Calendar("dp", {
            viewType: "Resources",
            cellDuration: 720,
            startDate: DayPilot.Date.today().firstDayOfMonth(),
            days: DayPilot.Date.today().daysInMonth(),
            headerHeight: 50,
            heightSpec: "Fixed",
            height: 500,
            cellHeight: 60,
            hourWidth: 120,
            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 = args.header.date.toString("M/d/yyyy tt");
            },
        });

        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();