# Time Header Active Areas (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo

> The first time header row displays an "info" icon on the right side (click the icon to see the time header cell details). The second row is split into custom 10-day sections using active areas with different colors. Read more about [time header active areas](https://doc.daypilot.org/scheduler/time-header-active-areas/).

## Links

- Canonical HTML: /demo/scheduler/timeheaderactiveareas.html
- Source HTML folder: /demo/scheduler/
- Catalog root: /demo/
- Catalog: /demo/llms.txt

## Source

### Inline demo script 1

```javascript
const dp = new DayPilot.Scheduler("dp", {
            startDate: "2026-01-01",
            days: 365,
            scale: "Day",
            timeHeaders: [
                {groupBy: "Month", format: "MMMM yyyy"},
                {groupBy: "Month", height: 24}
            ],
            treeEnabled: true,
            resources: [
                {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"},
                {name: "Room I", id: "I"},
                {name: "Room J", id: "J"},
                {name: "Room K", id: "K"}
            ],
            heightSpec: "Fixed",
            height: 200,
            rowMarginTop: 5,
            onTimeRangeSelected: async args => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                dp.clearSelection();
                if (modal.canceled) {
                    return;
                }
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    resource: args.resource,
                    text: modal.result
                });
                dp.message("Created");
            },
            onBeforeTimeHeaderRender: args => {
                if (args.header.level === 0) {
                    const style = "text-align: center; font-weight: bold; cursor: pointer; border-radius: 10px; border: 1px solid #ccc; background-color: #fff;";
                    args.header.areas = [
                        {
                            right: 6,
                            top: 6,
                            height: 16,
                            width: 16,
                            html: "i",
                            style: style,
                            action: "None",
                            onClick: args => {
                                const header = args.source;
                                console.log(args);
                                DayPilot.Modal.alert('Time slot clicked: ' + header.start.toString('yyyy-MM-dd HH:mm:ss') + ' - ' + header.end.toString('yyyy-MM-dd HH:mm:ss'));
                            }
                        },
                    ];
                } else if (args.header.level === 1) {
                    const point1 = args.header.start.addDays(10);
                    const point2 = args.header.start.addDays(20);
                    const padding = 3;
                    args.header.areas = [
                        {start: args.header.start, end: point1, top: padding, bottom: padding, backColor: "#cc0000", style: "border-radius: 10px;"},
                        {start: point1, end: point2, top: padding, bottom: padding, backColor: "#f1c232", style: "border-radius: 10px;"},
                        {start: point2, end: args.header.end, top: padding, bottom: padding, backColor: "#6aa84f", style: "border-radius: 10px;"},
                    ];

                    args.header.html = "";
                }
            }
        });
        dp.init();
        dp.scrollTo("2026-03-25");

        const app = {
            init() {
                this.loadEventData();
            },
            loadEventData() {
                // generate and load events
                const events = [];

                for (let i = 0; i < 15; i++) {
                    const duration = Math.floor(Math.random() * 6) + 1; // 1 to 6
                    const durationDays = Math.floor(Math.random() * 6 + 2); // 2 to 7
                    const start = Math.floor(Math.random() * 6) + 2; // 2 to 7

                    const resId = String.fromCharCode(65 + i);

                    const event = {
                        start: new DayPilot.Date("2026-03-25T00:00:00").addDays(start),
                        end: new DayPilot.Date("2026-03-25T12:00:00").addDays(start).addDays(durationDays).addHours(duration),
                        id: DayPilot.guid(),
                        resource: resId,
                        text: `Event ${i + 1}`
                    };

                    events.push(event);
                }
                dp.update({events});
            }
        };
        app.init();
```