Agent-readable demo data

Title

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

Tree

DayPilot JavaScript Demo

Catalog root

Lite

Description

Note: Read more about integrating the date navigator [doc.daypilot.org].

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

Inline demo script 1

const datepicker = new DayPilot.Navigator("nav", {
            showMonths: 3,
            selectMode: "Week",
            freeHandSelectionEnabled: true,
            onTimeRangeSelected: (args) => {
                calendar.update({
                    startDate: args.start
                });
            }
        });
        datepicker.init();

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

        const app = {
            init() {
                this.loadEvents();
            },
            loadEvents() {
                const events = [
                    {start: DayPilot.Date.today().addHours(10), end: DayPilot.Date.today().addHours(12), id: DayPilot.guid(), text: "Event 1"},
                    {start: DayPilot.Date.today().addHours(14), end: DayPilot.Date.today().addHours(16), id: DayPilot.guid(), text: "Event 2"},
                    {start: DayPilot.Date.today().addHours(18), end: DayPilot.Date.today().addHours(20), id: DayPilot.guid(), text: "Event 3"}
                ];
                calendar.update({events});
            }
        };
        app.init();