Agent-readable demo data

Title
JavaScript Event Calendar | DayPilot Pro for JavaScript Demo
Tree
DayPilot JavaScript Demo
Catalog root
Default
Description
Use external drag and drop to move events between the Calendar and the Queue component.

Inline demo script 1

const dp = new DayPilot.Calendar("dp", {
            startDate: DayPilot.Date.today(),
            viewType: "Week",
            onEventMove: args => {
                if (args.external) {
                    queue.events.remove(args.e.data.id);
                }
            },
            onTimeRangeSelected: async (args) => {
                const modal = await DayPilot.Modal.prompt("New event name:", "Event");
                dp.clearSelection();
                if (modal.canceled) return;
                dp.events.add({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    resource: args.resource,
                    text: modal.result
                });
                dp.message("Created");
            },
            dragOutAllowed: true,
        });

        dp.init();

        const queue = new DayPilot.Queue("queue", {
            onEventMove: args => {
                if (args.external) {
                    dp.events.remove(args.e.data.id);
                }
            },
            contextMenu: new DayPilot.Menu({
                items: [
                    {text: "Open", onClick: args => DayPilot.Modal.alert(args.source.text())}
                ]
            }),
            onEventClick: args => {
                DayPilot.Modal.alert(args.e.text());
            }
        });
        queue.init();


        const app = {
            loadData() {
                const first = DayPilot.Date.today().firstDayOfWeek("en-us").addDays(1);
                const calendarEvents = [
                    {
                        start: first.addHours(12).addMinutes(15),
                        end: first.addHours(15),
                        id: 1,
                        text: "Event 1",
                        barColor: "#3c78d8",
                        barBackColor: "#a4c2f4"
                    },
                    {
                        start: first.addDays(1).addHours(10),
                        end: first.addDays(1).addHours(12),
                        id: 2,
                        text: "Event 2",
                        barColor: "#6aa84f",
                        barBackColor: "#b6d7a8"
                    },
                    {
                        start: first.addDays(1).addHours(13),
                        end: first.addDays(1).addHours(15),
                        id: 3,
                        text: "Event 3",
                        barColor: "#f1c232",
                        barBackColor: "#ffe599"
                    },
                    {
                        start: first.addDays(2).addHours(11).addMinutes(15),
                        end: first.addDays(2).addHours(16).addMinutes(15),
                        id: 4,
                        text: "Event 4",
                        barColor: "#cc0000",
                        barBackColor: "#ea9999"
                    },
                ];
                dp.update({events: calendarEvents});

                const queueEvents =  [
                    { id: 5, start: first, end: first.addHours(4), text: "Event A", tags: {myfield: "value"}, bubbleHtml: "Event details"},
                    { id: 6, duration: DayPilot.Duration.ofHours(3), text: "Event B"},
                    { id: 7, duration: DayPilot.Duration.ofHours(3), text: "Event C"},
                    { id: 8, duration: DayPilot.Duration.ofHours(3), text: "Event D"},
                ];
                queue.update({events: queueEvents});

            },
            init() {
                this.loadData();
            }
        };
        app.init();