Agent-readable demo data

Title

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

Tree

DayPilot JavaScript Demo

Catalog root

Lite

Description

Read more about event customization.

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

Inline demo script 1

var dp = new DayPilot.Month("dp");

    // view
    dp.startDate = "2026-03-01";

    dp.events.list = [
        {
            "start": "2026-03-26T00:00:00",
            "end": "2026-03-26T12:00:00",
            "id": "43cefad6-8cea-d4b9-9b33-029fb1ff086d",
            "text": "Event 1",
            "tags": {
                "type": "note"
            }
        },
        {
            "start": "2026-03-06T00:00:00",
            "end": "2026-03-06T12:00:00",
            "id": "cb122202-5263-f467-73b3-643e4683bbc7",
            "text": "Event 2",
            "tags": {
                "type": "complete"
            }
        },
        {
            "start": "2026-03-03T00:00:00",
            "end": "2026-03-03T12:00:00",
            "id": "5a8376d2-8e3d-9739-d5d9-c1fba6ec02f9",
            "text": "Event 3"
        },
        {
            "start": "2026-02-25T00:00:00",
            "end": "2026-02-27T12:00:00",
            "id": "1fa34626-113a-ccb7-6a38-308e6cbe571e",
            "text": "Event 4",
            "tags": {
                "type": "important"
            }
        },
        {
            "start": "2026-03-02T00:00:00",
            "end": "2026-03-02T12:00:00",
            "id": "0ce20411-4344-1ac1-a777-c8e22fb5ff8a",
            "text": "Event 5"
        },
        {
            "start": "2026-03-04T00:00:00",
            "end": "2026-03-07T12:00:00",
            "id": "7c5d66f8-d00e-f289-31b0-10b256dd15c6",
            "text": "Event 6",
            "tags": {
                "type": "warning"
            }
        },
        {
            "start": "2026-03-03T00:00:00",
            "end": "2026-03-03T12:00:00",
            "id": "61631b1c-300c-a78c-4b83-ebda6e448ca4",
            "text": "Event 7"
        },
        {
            "start": "2026-03-02T00:00:00",
            "end": "2026-03-02T12:00:00",
            "id": "8757ccba-55af-03be-7405-57f1104b1750",
            "text": "Event 8"
        },
        {
            "start": "2026-03-02T00:00:00",
            "end": "2026-03-02T12:00:00",
            "id": "74641c6e-a2a2-15fe-f2f6-745318655745",
            "text": "Event 9"
        }
    ];

    // event creating
    dp.onTimeRangeSelected = function (args) {
        var name = prompt("New event name:", "Event");
        dp.clearSelection();
        if (!name) return;
        var e = new DayPilot.Event({
            start: args.start,
            end: args.end,
            id: DayPilot.guid(),
            text: name
        });
        dp.events.add(e);
    };

    dp.onEventClicked = function(args) {
        alert("clicked: " + args.e.id());
    };

    dp.onBeforeEventRender = function(args) {
        var type = args.data.tags && args.data.tags.type;
        switch (type) {
            case "important":
                args.data.fontColor = "#fff";
                args.data.backColor = "#E06666";
                args.data.borderColor = "#E06666";
                args.data.barHidden = true;
                break;
            case "note":
                args.data.fontColor = "#000";
                args.data.backColor = "#9FC5E8";
                args.data.borderColor = "#3D85C6";
                break;
            case "warning":
                args.data.fontColor = "#000";
                args.data.backColor = "#FFE599";
                args.data.borderColor = "#F1C232";
                args.data.barColor = "#F1C232";
                break;
            case "complete":
                args.data.fontColor = "#000";
                args.data.backColor = "#B6D7A8";
                args.data.borderColor = "#6AA84F";
                args.data.barColor = "#6AA84F";
                break;
        }
    };

    dp.init();