Agent-readable demo data

Title

Crosshair (JavaScript Scheduler) | DayPilot Pro for JavaScript Demo

Tree

DayPilot JavaScript Demo

Catalog root

Default

Description

Read more about the crosshair [doc.daypilot.org].

• Canonical HTML: /demo/scheduler/crosshair.html
• Markdown companion: /demo/scheduler/crosshair.md
• Folder: /demo/scheduler/
• Root: /demo/
• Catalog: /demo/llms.txt

Inline demo script 1

const dp = new DayPilot.Scheduler("dp", {
            startDate: DayPilot.Date.today().firstDayOfYear(),
            days: DayPilot.Date.today().daysInYear(),
            scale: "Day",
            timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
            crosshairType: "Full",
            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");
            },
            resources: [
                {name: "Room A", id: "A"},
                {name: "Room B", id: "B"},
                {name: "Room C", id: "C"},
                {name: "Room D", id: "D"},
                {name: "Room E", id: "E"},
                {name: "Room F", id: "F"},
            ],
        });
        dp.init();

        const app = {
          init() {
              const options = document.querySelectorAll("input[name='crosshair']");
              options.forEach(e => {
                  e.addEventListener("change", () => {
                      const value = document.querySelector("input[name='crosshair']:checked").value;
                      dp.crosshairType = value;
                  });
              });
          }
        };
        app.init();