# Time Header Customization (JavaScript Scheduler) | DayPilot Lite for JavaScript Demo

> You can customize the time header cells (HTML, colors, CSS, areas) using the onBeforeTimeHeaderRender event. Read more about the [time header customization](https://doc.daypilot.org/scheduler/time-header-customization/) [doc.daypilot.org].

## Links

- Canonical HTML: /demo/lite/scheduler/timeheadercustomization.html
- Source HTML folder: /demo/lite/scheduler/
- Catalog root: /demo/lite/
- Catalog: /demo/lite/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"}
            ],
            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
                });
            },
            onBeforeTimeHeaderRender: args => {
                if (args.header.level === 1) {
                    args.header.html = "Week " + args.header.text;
                }
                if (args.header.level === 2) {
                    const date = args.header.start;
                    if (date.getDayOfWeek() === 0 || date.getDayOfWeek() === 6) {
                        args.header.areas = [{
                            left: 0,
                            top: 0,
                            right: 0,
                            height: 4,
                            backColor: "#68c334",
                        }];
                    }
                }

            }
        });
        dp.init();
```