Agent-readable demo data

Title
Monthly Event Calendar | DayPilot Pro for JavaScript Demo
Tree
DayPilot JavaScript Demo
Catalog root
Default
Description
Hold a cursor on an event to see the active areas. The event active areas [doc.daypilot.org] can be used to display custom action buttons, drag handlers, icons, and other objects.

Inline demo script 1

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

        // behavior and appearance
        dp.cellMarginBottom = 20;

        dp.bubble = new DayPilot.Bubble({
            cssClassPrefix: "bubble_default",
            onLoad: function (args) {
                var ev = args.source;
                args.html = "testing bubble for: " + ev.text();
            }
        });
        dp.eventHoverHandling = "Disabled";

        // view
        dp.startDate = "2026-03-25";  // or just dp.startDate = "2026-03-25";

        // generate and load events
        for (var i = 0; i < 10; i++) {
            var duration = Math.floor(Math.random() * 1.2);
            var start = Math.floor(Math.random() * 6) - 3; // -3 to 3

            var e = new DayPilot.Event({
                start: new DayPilot.Date("2026-03-04T00:00:00").addDays(start),
                end: new DayPilot.Date("2026-03-04T12:00:00").addDays(start).addDays(duration),
                id: DayPilot.guid(),
                text: "Event " + i,
                areas: [{
                    onClick: (e) => {
                        dp.events.remove(e);
                    },
                    top: 3,
                    bottom: 9,
                    right: 3,
                    width: 17,
                    v: "Hover",
                    css: "event_action_delete"
                }]
            });
            dp.events.add(e);
        }

        // event moving
        dp.onEventMoved = function (args) {
            dp.message("Moved: " + args.e.text());
        };

        // event resizing
        dp.onEventResized = function (args) {
            dp.message("Resized: " + args.e.text());
        };

        // 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.message("Created");
        };

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

        dp.onHeaderClicked = function (args) {
            alert("day: " + args.header.dayOfWeek);
        };

        dp.init();