# Resource Header Customization (Open-Source Resource Calendar) | DayPilot Lite for JavaScript Demo

> The column headers display an image representing the corresponding resource. The images are defined in the columns array and they are added to the header using an active area added in the onBeforeHeaderRender event handler. Read more about [column header active areas](https://doc.daypilot.org/calendar/column-header-active-areas/) [doc.daypilot.org].

## Links

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

## Source

### Inline demo script 1

```javascript
const dp = new DayPilot.Calendar("dp", {
            startDate: "2024-04-01",
            viewType: "Resources",
            columns: [
                {name: "Room A", id: "A", image: "../helpers/img/pat-yellow.jpg"},
                {name: "Room B", id: "B", image: "../helpers/img/pat-blue.jpg"},
                {name: "Room C", id: "C", image: "../helpers/img/pat-orange.jpg"},
                {name: "Room D", id: "D", image: "../helpers/img/pat-red.jpg"},
            ],
            headerHeight: 90,
            onTimeRangeSelected: async (args) => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                dp.clearSelection();
                if (modal.canceled) {
                    return;
                }
                const name = modal.result;
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    resource: args.resource,
                    id: DayPilot.guid(),
                    text: name
                });
            },
            onBeforeHeaderRender: args => {
                args.header.verticalAlignment = "top";
                args.header.areas = [
                    {
                        left: "calc(50% - 30px)",
                        bottom: 5,
                        width: 60,
                        height: 60,
                        fontColor: "#999999",
                        image: args.column.data.image,
                        style: "box-sizing: border-box; border-radius: 50%; border: 3px solid #ffffff; overflow: hidden;",
                    }
                ];
            }
        });
        dp.init();

        const app = {
            init() {
                this.loadEvents();
            },
            loadEvents() {
                const events = [
                    {
                        start: "2024-04-01T11:00:00",
                        end: "2024-04-01T14:00:00",
                        id: 1,
                        resource: "A",
                        text: "Event 1",
                        barColor: "#3c78d8"
                    },
                    {
                        start: "2024-04-01T12:00:00",
                        end: "2024-04-01T15:00:00",
                        id: 2,
                        resource: "B",
                        text: "Event 2",
                        barColor: "#6aa84f"
                    },
                    {
                        start: "2024-04-01T10:00:00",
                        end: "2024-04-01T15:00:00",
                        id: 3,
                        resource: "C",
                        text: "Event 3",
                        barColor: "#f1c232"
                    },
                    {
                        start: "2024-04-01T12:00:00",
                        end: "2024-04-01T16:00:00",
                        id: 4,
                        resource: "D",
                        text: "Event 4",
                        barColor: "#cc0000"
                    },
                ];
                dp.update({events});
            }
        };
        app.init();
```