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

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

## Links

- Canonical HTML: /demo/calendar/scaleweeks.html
- Source HTML folder: /demo/calendar/
- Catalog root: /demo/
- Catalog: /demo/llms.txt

## Source

### Inline demo script 1

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