Agent-readable demo data

Title

Cell Icons (JavaScript Monthly Event Calendar) | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

This example shows how to display icons in the cells of the monthly calendar. The icons are clickable and can be used to trigger custom actions. Read more about the cell icons.

• Canonical HTML: /demo/month/cellicons.html
• Markdown companion: /demo/month/cellicons.md
• Folder: /demo/month/
• Root: /demo/
• Catalog: /demo/llms.txt

Inline demo script 1

const dp = new DayPilot.Month("dp", {
            startDate: DayPilot.Date.today(),
            onTimeRangeSelected: async args => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                dp.clearSelection();
                if (!modal.result) return;
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    text: modal.result
                });
                dp.message("Created");
            },
            onBeforeCellRender: args => {
                args.cell.properties.headerHtml = "";
                args.cell.properties.areas = [
                    {
                        left: 0,
                        top: 0,
                        right: 0,
                        bottom: 0,
                        text: args.cell.start.toString("d"),
                        style: "font-size: 26px; display: flex; justify-content: center; align-items: center;",
                        fontColor: "#e0e0e0"
                    }
                ];

                if (args.cell.start.getDay() < 15 && args.cell.start.getMonth() === DayPilot.Date.today().getMonth()) {
                    args.cell.properties.areas.push({
                        right: 2,
                        top: 2,
                        width: 20,
                        height: 20,
                        symbol: "../icons/daypilot.svg#padlock",
                        // orange
                        fontColor: "#ff8c00",
                        style: "cursor: pointer;",
                        action: "None",
                        onClick: args => {
                            const cell = args.source;
                            DayPilot.Modal.alert("Cell clicked: " + cell.start);
                            console.log("args", args);
                        },
                    });
                }
            }
        });
        dp.init();