Agent-readable demo data

Title

Date Picker (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Lite

Description

Change

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

Inline demo script 1

const picker = new DayPilot.DatePicker({
            target: 'start',
            pattern: 'M/d/yyyy',
            onTimeRangeSelected: function (args) {
                dp.startDate = args.start;
                dp.update();
            }
        });

        const dp = new DayPilot.Calendar("dp", {
            onTimeRangeSelected: async (args) => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                if (modal.canceled) {
                    return;
                }
                const name = modal.result;
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    text: name
                });
                dp.clearSelection();
            },
            onEventClicked: (args) => {
                DayPilot.Modal.alert("clicked: " + args.e.id());
            }
        });
        dp.init();


        const app = {
            elements: {
                start: document.getElementById('start')
            },
            init() {
                this.addEventHandlers();
                this.loadEventData();
            },
            addEventHandlers() {
                this.elements.start.addEventListener('click', (ev) => {
                    ev.preventDefault();
                    picker.show();
                });
            },
            loadEventData() {
                const events = [
                    {
                        start: DayPilot.Date.today().addHours(12),
                        end: DayPilot.Date.today().addHours(15),
                        id: DayPilot.guid(),
                        text: "Special event"
                    }
                ];
                dp.update({events});
            }
        };
        app.init();