Agent-readable demo data

Title

Resource Header Customization (Open-Source Resource Calendar) | DayPilot Lite for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Lite

Description

The column headers display an image representing the corresponding resource. The images are defined in the columns array and they are added to the header using an active area added in the onBeforeHeaderRender event handler. Read more about column header active areas [doc.daypilot.org].

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

Inline demo script 1

const dp = new DayPilot.Calendar("dp", {
            startDate: "2024-04-01",
            viewType: "Resources",
            columns: [
                {name: "Room A", id: "A", image: "../helpers/img/pat-yellow.jpg"},
                {name: "Room B", id: "B", image: "../helpers/img/pat-blue.jpg"},
                {name: "Room C", id: "C", image: "../helpers/img/pat-orange.jpg"},
                {name: "Room D", id: "D", image: "../helpers/img/pat-red.jpg"},
            ],
            headerHeight: 90,
            onTimeRangeSelected: async (args) => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                dp.clearSelection();
                if (modal.canceled) {
                    return;
                }
                const name = modal.result;
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    resource: args.resource,
                    id: DayPilot.guid(),
                    text: name
                });
            },
            onBeforeHeaderRender: args => {
                args.header.verticalAlignment = "top";
                args.header.areas = [
                    {
                        left: "calc(50% - 30px)",
                        bottom: 5,
                        width: 60,
                        height: 60,
                        fontColor: "#999999",
                        image: args.column.data.image,
                        style: "box-sizing: border-box; border-radius: 50%; border: 3px solid #ffffff; overflow: hidden;",
                    }
                ];
            }
        });
        dp.init();

        const app = {
            init() {
                this.loadEvents();
            },
            loadEvents() {
                const events = [
                    {
                        start: "2024-04-01T11:00:00",
                        end: "2024-04-01T14:00:00",
                        id: 1,
                        resource: "A",
                        text: "Event 1",
                        barColor: "#3c78d8"
                    },
                    {
                        start: "2024-04-01T12:00:00",
                        end: "2024-04-01T15:00:00",
                        id: 2,
                        resource: "B",
                        text: "Event 2",
                        barColor: "#6aa84f"
                    },
                    {
                        start: "2024-04-01T10:00:00",
                        end: "2024-04-01T15:00:00",
                        id: 3,
                        resource: "C",
                        text: "Event 3",
                        barColor: "#f1c232"
                    },
                    {
                        start: "2024-04-01T12:00:00",
                        end: "2024-04-01T16:00:00",
                        id: 4,
                        resource: "D",
                        text: "Event 4",
                        barColor: "#cc0000"
                    },
                ];
                dp.update({events});
            }
        };
        app.init();