# Cell Customization (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo

> You can write custom HTML to grid cells. You can also modify cell properties, such as background color, CSS class and IsBusiness status. Read more about [cell customization](https://doc.daypilot.org/scheduler/cell-customization/) [doc.daypilot.org].

## Links

- Canonical HTML: /demo/scheduler/cellcustomization.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",
            cellWidth: 80,
            eventHeight: 40,
            timeHeaders: [
                {groupBy: "Month", format: "MMMM yyyy"},
                {groupBy: "Cell", format: "d"}
            ],
            onBeforeCellRender: args => {
                if (args.cell.resource === "A" && args.cell.start.getDay() === 1) {
                    args.cell.areas = [
                        {backColor: "#f1c232", top: 0, left: 0, right: 0, height: 4},
                        {
                            backColor: "#ffe599",
                            top: 4,
                            left: 0,
                            right: 0,
                            height: 15,
                            text: "Maintenance",
                            style: "text-align: center; color: #333; font-size: 8pt;"
                        },
                    ];
                    args.cell.properties.status = "Under Maintenance";
                }
                if (args.cell.resource === "D") {
                    args.cell.areas = [
                        {backColor: "#e06666", top: 0, left: 0, right: 0, height: 4},
                        {
                            backColor: "#f4cccc",
                            top: 4,
                            left: 0,
                            right: 0,
                            bottom: 0,
                            text: "Unavailable",
                            style: "text-align: center; color: #333; font-size: 8pt;"
                        },
                    ];
                    args.cell.properties.status = "Unavailable";
                }
            },
            onCellMouseOver: args => {
                if (args.cell.properties.status) {
                    new DayPilot.Bubble().showHtml(args.cell.properties.status, args.cell.div);
                }
            },
            onCellMouseOut: args => {
                DayPilot.Bubble.hideActive();
            },
            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"},
            ],
            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");
            },
            height: 350
        });
        dp.init();
```