# Text in Cells (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Demo

> Note: This demo uses the [onBeforeCellRender](https://api.daypilot.org/daypilot-calendar-onbeforecellrender/) event to add "Unavailable" text to the selected day and add a custom CSS class to the cells. Read more about Calendar [cell customization](https://doc.daypilot.org/calendar/cell-customization/).

## Links

- Canonical HTML: /demo/lite/calendar/textincells.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", {
            viewType: "Week",
            startDate: DayPilot.Date.today(),
            // headerDateFormat: "dddd",
            onTimeRangeSelected: async args => {

                const form = [
                    {name: "Name", id: "text"}
                ];

                const data = {
                    text: "Event"
                };

                const modal = await DayPilot.Modal.form(form, data);

                dp.clearSelection();

                if (modal.canceled) {
                    return;
                }

                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    text: modal.result.text,
                    barColor: "#3c78d8"
                });
            },
            onBeforeCellRender: args => {
                // mark the selected day as unavailable, add a custom CSS class
                if (args.cell.start.getDatePart() === DayPilot.Date.today()) {
                    args.cell.properties.cssClass = "unavailable";
                    args.cell.properties.html = "Unavailable";
                }
            }
        });
        dp.init();

        const app = {
            init() {
                this.loadEvents();
            },
            loadEvents() {
                const events = [
                ];
                dp.update({events});
            }
        };
        app.init();
```