Agent-readable demo data

Title

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

Tree

DayPilot JavaScript Demo

Catalog root

Lite

Description

You can specify custom event types and define their appearance using the onBeforeEventRender event handler. Read more about event customization [doc.daypilot.org].

• Canonical HTML: /demo/lite/calendar/eventtypes.html
• Markdown companion: /demo/lite/calendar/eventtypes.md
• Folder: /demo/lite/calendar/
• Root: /demo/lite/
• Catalog: /demo/lite/llms.txt

Inline demo script 1

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();