# Event Customization (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Demo

> You can customize the event appearance (text/HTML, background and font color, CSS class, duration bar...) using the onBeforeEventRender event handler. Read more about [event customization](https://doc.daypilot.org/calendar/event-customization/) [doc.daypilot.org].

## Links

- Canonical HTML: /demo/lite/calendar/eventcustomization.html
- Source HTML folder: /demo/lite/calendar/
- Catalog root: /demo/lite/
- Catalog: /demo/lite/llms.txt

## Source

### Inline demo script 1

```javascript
var dp = new DayPilot.Calendar("dp");

        // view
        dp.startDate = "2022-06-06";
        dp.viewType = "Week";
        dp.durationBarVisible = false;

        dp.events.list = [
            {
                "start": "2022-06-06T10:00:00",
                "end": "2022-06-06T13:00:00",
                "id": "23ef6fcd-e12d-b085-e38a-a4e23d0bb61d",
                "text": "Event 1",
                "backColor": "#FFE599",
                "borderColor": "#F1C232"
            },
            {
                "start": "2022-06-07T11:00:00",
                "end": "2022-06-07T14:00:00",
                "id": "fb62e2dd-267e-ec91-886b-73574d24e25a",
                "text": "Event 2",
                "backColor": "#9FC5E8",
                "borderColor": "#3D85C6"
            },
            {
                "start": "2022-06-08T10:00:00",
                "end": "2022-06-08T13:00:00",
                "id": "29b7a553-d44f-8f2c-11e1-a7d5f62eb123",
                "text": "Event 3",
                "backColor": "#B6D7A8",
                "borderColor": "#6AA84F"
            },
            {
                "start": "2022-06-08T14:00:00",
                "end": "2022-06-08T17:00:00",
                "id": "ff968cfb-eba1-8dc1-7396-7f0d4f465c8a",
                "text": "Event 4",
                "backColor": "#EA9999",
                "borderColor": "#CC0000",
                "tags": {
                    "type": "important"
                }
            }
        ];

        dp.onBeforeEventRender = function (args) {
            args.data.areas = [
                {
                    top: 0,
                    left: 0,
                    right: 0,
                    text: args.data.text,
                    backColor: args.data.borderColor,
                    fontColor: "#ffffff",
                    padding: 4,
                    horizontalAlignment: "center"
                }
            ];

            args.data.text = "Event details";
        };

        dp.init();
```