Agent-readable demo data

Title
Event Customization (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Demo
Tree
DayPilot JavaScript Demo
Catalog root
Lite
Description
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 [doc.daypilot.org].

Inline demo script 1

const dp = new DayPilot.Calendar("dp", {
            startDate: "2026-10-12",
            viewType: "Week",
            durationBarVisible: false,
            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";
            }
        });

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

        app.init();