# Time Headers (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox

> The Scheduler can display multiple time header rows, each with a defined resolution and date format. Read more about the [time header rows](https://doc.daypilot.org/scheduler/time-header-rows/) [doc.daypilot.org].

## Links

- Canonical HTML: /sandbox/scheduler/timeheaders.html
- Source HTML folder: /sandbox/scheduler/
- Catalog root: /sandbox/
- Catalog: /sandbox/llms.txt

## Source

### Inline demo script 1

```javascript
const dp = new DayPilot.Scheduler("dp", {
            startDate: new DayPilot.Date("2026-03-01"),
            days: 90,
            scale: "Day",
            timeHeaders: [
                {groupBy: 'Month', height: 25},
                {groupBy: 'Week'},
                {groupBy: 'Day', format: "d"}
            ],
            treeEnabled: true,
            resources: [
                {name: "Room A", id: "A"},
                {name: "Room B", id: "B"},
                {name: "Room C", id: "C"}
            ],
            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 === 1) {
                    args.header.html = "Week " + args.header.text;
                }
            },
        });
        dp.init();
```