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 resource header displays an "edit" icon using an active area added in the onBeforeHeaderRender event handler. Read more about column header active areas [doc.daypilot.org].

Inline demo script 1

const dp = new DayPilot.Calendar("dp", {
            startDate: "2022-06-24",
            viewType: "Resources",
            columns: [
                {name: "Room A", id: "A"},
                {name: "Room B", id: "B"},
                {name: "Room C", id: "C"},
                {name: "Room D", id: "D"},
            ],
            headerHeight: 40,
            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.areas = [
                    {
                        right: "5",
                        top: 5,
                        width: 30,
                        height: 30,
                        fontColor: "#999999",
                        symbol: "../icons/daypilot.svg#edit",
                        padding: 3,
                        cssClass: "icon",
                        toolTip: "Edit...",
                        onClick: async args => {
                            const form = [
                                {name: "Name", id: "name"},
                            ];
                            const data = args.source.data;
                            console.log(data);
                            const modal = await DayPilot.Modal.form(form, data);
                            if (modal.canceled) {
                                return;
                            }
                            const name = modal.result.name;
                            args.source.data.name = name;
                            dp.update();
                        }
                    }
                ];
            }
        });
        dp.init();

        const app = {
            loadEventData() {
                const events = [
                    {
                        start: "2022-06-24T12:00:00",
                        end: "2022-06-24T15:00:00",
                        resource: "B",
                        id: DayPilot.guid(),
                        text: "Room reservation"
                    }
                ];
                dp.update({events});
            },
            init() {
                this.loadEventData();
            }
        };
        app.init();