# Resources View (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Demo

> Note: Read more about the [resource calendar](https://doc.daypilot.org/calendar/resources-view/) [doc.daypilot.org].

## Links

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

## Source

### Inline demo script 1

```javascript
const calendar = new DayPilot.Calendar("calendar", {
            startDate: "2025-06-24",
            viewType: "Resources",
            headerHeight: 40,
            eventBorderRadius: 5,
            columns: [
                {name: "Room A", id: "A"},
                {name: "Room B", id: "B"},
                {name: "Room C", id: "C"},
                {name: "Room D", id: "D"},
                {name: "Room E", id: "E"},
                {name: "Room F", id: "F"},
                {name: "Room G", id: "G"},
                {name: "Room H", id: "H"},
            ],
            onTimeRangeSelected: async (args) => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                calendar.clearSelection();
                if (modal.canceled) {
                    return;
                }
                const name = modal.result;
                calendar.events.add({
                    start: args.start,
                    end: args.end,
                    resource: args.resource,
                    id: DayPilot.guid(),
                    text: name
                });
            }

        });
        calendar.init();

        const app = {
            loadEventData() {
                const events = [
                    {
                        start: "2025-06-24T12:00:00",
                        end: "2025-06-24T15:00:00",
                        resource: "B",
                        id: DayPilot.guid(),
                        text: "Reservation #101",
                        barColor: "#f6b26b"
                    },
                    {
                        start: "2025-06-24T10:00:00",
                        end: "2025-06-24T13:00:00",
                        resource: "C",
                        id: DayPilot.guid(),
                        text: "Reservation #102",
                        barColor: "#93c47d"
                    },
                    {
                        start: "2025-06-24T14:00:00",
                        end: "2025-06-24T17:00:00",
                        resource: "C",
                        id: DayPilot.guid(),
                        text: "Reservation #103",
                        barColor: "#6fa8dc"
                    },
                    {
                        start: "2025-06-24T11:00:00",
                        end: "2025-06-24T15:00:00",
                        resource: "D",
                        id: DayPilot.guid(),
                        text: "Reservation #104",
                        barColor: "#f1c232"
                    },
                ];
                calendar.update({events});
            },
            init() {
                this.loadEventData();
            }
        };
        app.init();
```