Agent-readable demo data

Title
Event End Spec (Monthly Event Calendar) | DayPilot Pro for JavaScript Demo
Tree
DayPilot JavaScript Demo
Catalog root
Default
Description
You can specify the event end date as date-only using .eventEndSpec = "Date".

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();
            }
        });

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

        dp.eventEndSpec = "Date";

        // generate and load events
        dp.events.list = [{
            start: "2026-03-04",
            end: "2026-03-04",
            id: DayPilot.guid(),
            text: "One-day event"
        },
            {
                start: "2026-03-04",
                end: "2026-03-05",
                id: DayPilot.guid(),
                text: "Two-day event"
            }];

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

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

        dp.onBeforeHeaderRender = function (args) {

        };

        // 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.tag("url"));
        };

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

        dp.onBeforeCellRender = function (args) {
        };

        dp.init();