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

> You can specify custom event types and define their appearance 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/eventtypes.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: 24,
                        height: 24,
                        symbol: "../icons/daypilot.svg#checkmark-4",
                        style: "border-radius: 50%; box-sizing: border-box",
                        backColor: "#0000007f",
                        fontColor: "#ffffff",
                        padding: 4
                    }
                ];


                switch (args.data.type) {
                    case "appointment":
                        args.data.backColor = "#95c97f";
                        args.data.fontColor = "#ffffff";
                        args.data.areas[0].symbol = "../icons/daypilot.svg#figure";
                        break;
                    case "task":
                        args.data.backColor = "#6498dc";
                        args.data.fontColor = "#ffffff";
                        args.data.areas[0].symbol = "../icons/daypilot.svg#checkmark-4";
                        break;
                }
                args.data.borderColor = "darker";

            }
        });
        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: "Task 1",
                        type: "task"
                    },
                    {
                        start: "2022-06-07T11:00:00",
                        end: "2022-06-07T14:00:00",
                        id: "fb62e2dd-267e-ec91-886b-73574d24e25a",
                        text: "Task 2",
                        type: "task"
                    },
                    {
                        start: "2022-06-08T10:00:00",
                        end: "2022-06-08T13:00:00",
                        id: "29b7a553-d44f-8f2c-11e1-a7d5f62eb123",
                        text: "Appointment 1",
                        type: "appointment",
                    },
                    {
                        start: "2022-06-08T14:00:00",
                        end: "2022-06-08T17:00:00",
                        id: "ff968cfb-eba1-8dc1-7396-7f0d4f465c8a",
                        text: "Appointment 2",
                        type: "appointment",
                    }
                ];

                dp.update({events});
            }
        };
        app.init();
```