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

> You can add images/icons at the specified position inside an event 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/eventicons.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", {
            startDate: "2022-06-06",
            viewType: "Week",
            durationBarVisible: false,
            onBeforeEventRender: args => {
                args.data.areas = [
                    {
                        left: 5,
                        bottom: 5,
                        width: 40,
                        height: 40,
                        symbol: "../icons/daypilot.svg#checkmark-4",
                        style: "border-radius: 50%",
                        backColor: "#0000007f",
                        fontColor: "#ffffff",
                        padding: 4
                    }
                ]
            }
        });
        dp.init();

        const app = {
            init() {
                this.loadEvents();
            },
            loadEvents() {
                const events = [
                    {
                        "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.update({events});
            }
        };
        app.init();
```